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

Question

现在，材料UI的最新版本具有用于造型组件的挂钩替代方案，而不是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;

在某些方面，这是更好的，但是与所有钩子一样，您无法再向组件注入"存根"依赖性。以前，对于使用酶进行测试，我刚刚测试了非样式组件：

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

编辑：根据下面的注释，此实现提出了一些时机问题。考虑使用安装架而不是浅层测试进行测试，或使用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');
  });
});

这是我目前可以提出的最好的，但始终对Supgetions开放。