Enzyme Shallow Rendering и Material-UI: вы предоставляете функцию без темы в контексте

Question

Я очень плохо знаком с тестами и пытаюсь реализовать их в существующем реактивном проекте. У меня есть компонент кнопки, который нуждается в контексте темы. Я понимаю, что для предоставления этой темы в тестовом файле необходимо поместить компонент в поставщик тем. Однако даже после того, как я сделал это и попробовал все возможные варианты передачи темы в качестве контекста, который я нашел, я все равно получаю ошибку:

"Material-UI: предоставлен аргумент styles недействительно.
Вы предоставляете функцию без темы в контексте.
Один из родительских элементов должен использовать ThemeProvider. "

My button.test. js :

import React from 'react';
import { ThemeProvider, createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles"
import red from "@material-ui/core/colors/red"
import grey from "@material-ui/core/colors/grey"
import Button from "../../components/basics/button"
import Enzyme, { shallow } from "enzyme"
import EnzymeAdapter from "enzyme-adapter-react-16"

Enzyme.configure({adapter: new EnzymeAdapter()});

let theme = createMuiTheme({
  palette: {
    primary: {
      main: red[600],
      contrastText: '#fff',
    },
    secondary: {
      main: grey[500],
      light: grey[300]
    },
  },
  typography:{
    button: {
      fontWeight: "500",
      textTransform: 'none',
    }
  }
})
theme = responsiveFontSizes(theme);

test("Returns a valid button", () => {

  const wrapper = shallow(
    <ThemeProvider theme={theme}>
      <Button type="normalWithIcon" variant="outlined" icon="GetApp" buttonText="Download" color="primary"/>
    </ThemeProvider>
  )

  const b = wrapper.find(Button).dive().find("[data-test='component-button']")

  console.log(b)

  expect(b.length).toBe(1)

})

И эта ошибка вызывается, когда компонент кнопки пытается создать стили:

TypeError: Cannot read property 'secondary' of undefined

      24 |   const useStyles = makeStyles((theme) => ({
      25 |     root: {
    > 26 |       color: theme.palette.secondary.main,
         |                            ^
      27 | 
      28 |       '&$disabled': {
      29 |         color: theme.palette.secondary.light

Я использую последние версии React, Jest и Enzyme.

Answer 1

Короче говоря, используйте mount вместо shallow всякий раз, когда вам нужно dive в мелкий визуализируемый компонент.

В соответствии с описанием dive в документах Enzyme , он будет:

Мелко визуализировать одного не-DOM-потомка текущей оболочки и вернуть оболочку вокруг результата. Это должен быть одноузловая оболочка, а узел должен быть компонентом React.

Итак, dive возвращает новую поверхностную оболочку вокруг дочернего элемента Button, которая больше не включает ThemeProvider или Button сама. Таким образом, используйте mount вместо этого, если вы собираетесь протестировать что-то визуализированное внутри Button.