Функция монтирования Document-UI для тестирования документов возвращает пустой ReactWrapper - PullRequest
Новая
       19

Функция монтирования Document-UI для тестирования документов возвращает пустой ReactWrapper

0 голосов
/ 27 сентября 2019

Я бы хотел начать тестирование своих компонентов React, большинство из которых имеют стили, определенные в makeStyles пользовательского интерфейса Material-UI (import { makeStyles } from '@material-ui/styles').

Документы тестирования Material-UI сильно препятствуют мелкому монтированию: «Мы используем почти исключительно полные API-интерфейсы рендеринга DOM. Мы рекомендуем вам делать то же самое, особенно если ваши компоненты основаны на пользовательских темах. Тесты с использованием неглубоких API-интерфейсов рендеринга становятся более хрупкими с количеством необходимых им компонентов провайдера».Мелкий рендеринг действительно был проблематичным для меня.

Они предоставляют пример полного рендеринга DOM через createMount, которому я пытаюсь следовать.Вот мой тестовый код: 

import { createMount } from '@material-ui/core/test-utils'
import { MuiThemeProvider } from '@material-ui/core/styles'
import theme from '../../../mui-theme'

let mount

const Themed = ({ children }) => {
  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
}

beforeAll(() => {
  mount = createMount()
})

afterAll(() => {
  mount.cleanUp()
})

describe('<InnerHeader />', () => {
  test('InnerHeader successfully mounts', () => {
    const wrapper = mount(
      <Themed>
        <InnerHeader navLinks={[{ name: 'Home', url: '/' }]} />
      </Themed>
    )
    console.log(wrapper)
    expect(wrapper.find('#foo')).to.have.lengthOf(1)
  })
})

Корневым элементом компонента InnerHeader является <div id='foo'> ... </div>, поэтому я ожидаю, что wrapper.find вернет его.Вместо этого я получаю TypeError: Cannot read property 'have' of undefined, и console.log показывает, что wrapper является пустым ReactWrapper: 

  console.log src/components/Header/tests/InnerHeader.test.js:47
    ReactWrapper {}

Я предполагаю, что я монтирую компонент неправильно, но в документации по тестированию материала, их примерmount не имеет смысла: 

function MySuccessButton({ children }) {
    return (
      <MuiThemeProvider theme={{ success: { main: '#fff' } }}>
        {children}
      </MuiThemeProvider>
    );
  }

... //later

const wrapper = mount(<MockedTheme><MySuccessButton /></MockedTheme>)

MySuccessButton не имеет детей и MockedTheme нигде нет.В целом, я хотел бы иметь пример, где mount возвращает ReactWrapper, который не является пустым.

...