Как протестировать компонентную базу на материальном ui?

У меня есть следующий компонент, который построен с https://material-ui-next.com/.

import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {lightBlue} from 'material-ui/colors';

const theme = createMuiTheme({
  palette: {
    primary: {
      main:lightBlue['A700']
    },
    text: {
      primary: '#fff',
    }
  },
});

const View = (props) => (
  <MuiThemeProvider theme={theme}>
    <AppBar position="static">
      <Toolbar>
      <Typography variant="title">
        {props.title}
      </Typography>          
      </Toolbar>
    </AppBar>
  </MuiThemeProvider>
);
export default View;  

Я пытаюсь написать для него тест:

import React from 'react';
import { shallow } from 'enzyme';
import View from '../Views/View';
import { Typography } from 'material-ui';

it('renders', () => {
  const wrapper = shallow(<View title='Welcome' />);
  expect(wrapper.find('Typography').text()).toEqual('Welcome');
});  

Как написать тест для компонента, использующего компоненты material-ui? В приведенном выше случае я попытался выяснить, содержит ли компонент Welcome.
Читал https://material-ui-next.com/guides/testing/, но не понятно, как написать тест.

1
0
1 764
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

UPD: API изменен с shallow на mount

Вы пробовали использовать их API описано здесь? Вероятно, ваш тест может выглядеть примерно так:

import React from 'react';
import { createMount } from 'material-ui/test-utils';
import View from '../Views/View';
import { Typography } from 'material-ui';

it('renders', () => {
  const mount = createMount();
  const wrapper = mount(<View title='Welcome' />);
  expect(wrapper.find('Typography').text()).toEqual('Welcome');
});

Да, но там написано: We expose a createShallow() function for this situation. However, you will most likely not need it most of the time. Shallow rendering was created to test components in isolation. This means without leaking child implementation details such as the context. Вот почему я избегаю его использования.

softshipper 11.04.2018 14:44

Но вы выбираете enzymes shallow, которые в основном делают то же самое (скрывают детали реализации дочерних элементов)! Вам нужно выбрать, что тестировать - все дерево компонентов со всей реализацией (используйте для этого mount) или только верхний компонент (используйте shallow). Кстати, если вы хотите писать модульные тесты - вам понадобится shallowly тестировать каждый компонент большую часть времени, это предлагается в документации jest.

Andrew Miroshnichenko 11.04.2018 14:48

Тогда как проверить свойство, например свойство title из компонента View?

softshipper 11.04.2018 15:11

Сначала ответ. Что является верхним элементом View? MuiThemeProvider?

softshipper 11.04.2018 15:29

Я не знаю внутренней реализации createMount() от material-ui/test-utils. Кажется, что он выполняет то, что указано в описании material-ui-next.com/guides/testing/#createmount-options-mou‌ nt - создает правильный контекст для тестирования смонтированного элемента (View в вашем случае). Это ответ на ваш вопрос, потому что теперь все функции enzyme доступны для тестирования вашего компонента.

Andrew Miroshnichenko 11.04.2018 15:52

Другие вопросы по теме