使用 Hooks API 和 Enzyme 浅层渲染测试 Material UI 组件

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();
  });
});

然而，如果你使用钩子，没有类的“存根”依赖，你会得到：

  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();
  });
});

但这似乎不再渲染组件的子组件（即使使用潜水调用）。人们是怎么做到的？

Answer 1

编辑：根据下面的 cmets，此实现存在一些时间问题。考虑使用 mount 测试而不是浅层测试，或者使用 withStyles HOC 并导出组件以进行浅层渲染。

所以我已经为此苦苦挣扎了一天。这是我想出的。

尝试存根 makeStyles 时存在一些问题，因为 MUI 似乎已将其设为只读。因此，我没有在每个组件中创建useStyles 挂钩，而是创建了自己的自定义useStyles 挂钩，该挂钩调用makeStyles。通过这种方式，我可以存根我的useStyles 钩子以进行测试，而对我的代码流的影响最小。

// root/utils/useStyles.js
// My custom useStyles hook

import makeStyles from '@material-ui/styles/makeStyles';

export const useStyles = styles => makeStyles(theme => styles(theme))();

这几乎就像使用withStyles HOC

// root/components/MyComponent.js
import React from 'react';
import { useStyles } from '../util/useStyles';

// create styles like you would for withStyles
const styles = theme => ({
  root: {
    padding: 0,
  },
});

export const MyComponent = () => {
  const classes = useStyles(styles);
  return(
    </>
  );
}

// root/component/MyComponent.spec.js
import { MyComponent } from './MyComponent';
import { shallow } from 'enzyme';
import { stub } from 'sinon';

describe('render', () => {
  it('should render', () => {
    let useStylesStub;
    useStylesStub = stub(hooks, 'useStyles');
    useStylesStub.returns({ });
    const wrapper = shallow(<MyComponent />);
    console.log('profit');
  });
});

这是我目前能想到的最好的，但总是愿意接受建议。