Тестирование компонентов пользовательского интерфейса материалов с использованием Hooks API и Enzyme shallow

Question

В последних версиях Material UI теперь есть альтернатива Hooks для стилей компонентов вместо HoC.Таким образом, вместо

const styles = theme => ({
  ...
});

export const AppBarHeader = ({ classes, title }) => (
  ...
);
export default withStyles(styles)(AppBarHeader);

вы можете сделать это вместо этого:

const useStyles = makeStyles(theme => ({
  xxxx
}));

const AppBarHeader = ({ title }) => {
  const classes = useStyles();
  return (
    ....
  )
};

export default AppBarHeader;

В некоторых отношениях это лучше, но, как и во всех хуках, вы больше не можете вводить «заглушку»зависимость от компонента.Ранее для тестирования с помощью Enzyme я только что протестировал нестилированный компонент:

describe("<AppBarHeader />", () => {
  it("renders correctly", () => {
    const component = shallow(
      <AppBarHeader title="Hello" classes="{}" />
    );
    expect(component).toMatchSnapshot();
  });
});

Однако, если вы используете ловушки, без зависимости 'stub' для классов, и вы получаете:

  Warning: Material-UI: the `styles` argument provided is invalid.
  You are providing a function without a theme in the context.
  One of the parent elements needs to use a ThemeProvider.

потому что вам всегда нужен поставщик на месте.Я могу пойти и обернуть это:

describe("<AppBarHeader />", () => {
  it("renders correctly", () => {
    const component = shallow(
      <ThemeProvider theme={theme}>
        <AppBarHeader title="Hello" classes="{}" />
      </ThemeProvider>
    ).dive();
    expect(component).toMatchSnapshot();
  });
});

, но это больше не отображает дочерние элементы компонента (даже при вызове погружения).Как люди делают это?