reactjs - 如何浅层测试包含在 memo 和 withStyles 中的 React 组件？

Question

我有一个组件，它包装在 Material-UI withStyles HOC 和 React memo HOC 中。

我无法测试此组件，因为我无法调用 dive():

ShallowWrapper::dive() 只能在组件上调用

我目前知道的唯一选择是独立导出演示和导出默认withStyles(styles)(Demo)。这使我能够测试未包含在 withStyles 中的组件。我想避免使用这种方法。

如果我删除 memo()，我就可以测试该组件。同样，如果我删除 withStyles()，我也可以测试该组件。这些 HOC 的组合使我的组件无法测试。

有哪些可用策略可以有效测试此组件？

demo.js

import React, { memo } from "react";
import MUIIconButton from "@material-ui/core/IconButton";
import { withStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";

const styles = () => ({
  root: {
    backgroundColor: "red"
    /* more styles... */
  }
});

const Demo = memo(({ label, classes }) => (
  <div className={classes.root}>
    <Tooltip disableFocusListener title={label}>
      <Typography>label</Typography>
    </Tooltip>
  </div>
));

export default withStyles(styles)(Demo);

demo.test.js

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow } from "enzyme";
import Demo from "./demo";
import MUIIconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

configure({ adapter: new Adapter() });

describe("Demo", () => {
  it("Should have a tooltip with label", () => {
    const tooltip = "My tooltip";

    const el = shallow(<Demo label={tooltip} />).dive();

    expect(el.find(Tooltip).props().title).toEqual(tooltip);
  });
});

完整工作沙盒

Answer 1

当我用备忘录包裹时，我得到一个看起来像这样的形状

import MemoizedFoo from './Foo'
console.log(MemoizedFoo) 

    { '$$typeof': Symbol(react.memo),
      type:
       { [Function: Foo]
         displayName: 'Foo',
         defaultProps: { theme: {} } },
      compare: null }

所以在我的玩笑测试中，我可以通过引用类型键来获取内部组件

import MemoizedFoo from './Foo'
const Foo = MemoizedFoo.type

describe() { it() { shallow(Foo) ...etc } }

这对于浅层单元测试非常有用。

如果我正在安装父组件并寻找子组件，您可以执行以下操作:

wrapper = mount(Layout)
wrapper.find('Memo(Foo)')