使用 Jest 和 Enzyme 测试 Material UI 组件

Question

我正在尝试使用 Jest 和 Enzyme 测试使用 <ExpansionPanel /> 作为其子组件的 React 组件。

作为参考，console.log(wrapper.debug()) 如下所示：

const wrapper = shallow(<SomeComponent/>);
console.log(wrapper.debug());

<Fragment>
  <WithStyles(ForwardRef(ExpansionPanel)) defaultExpanded={true}>
    <WithStyles(ForwardRef(ExpansionPanelSummary)) expandIcon={{...}} aria-controls="panel1a-content" id="panel1a-header">
      <p className="summary text">
        Basic Options
      </p>
    </WithStyles(ForwardRef(ExpansionPanelSummary))>
    <WithStyles(ForwardRef(ExpansionPanelDetails))>
      <Connect(OptionDetails) optionType="basicOptions" />
    </WithStyles(ForwardRef(ExpansionPanelDetails))>
  </WithStyles(ForwardRef(ExpansionPanel))>
  <WithStyles(ForwardRef(ExpansionPanel)) defaultExpanded={false}>
    <WithStyles(ForwardRef(ExpansionPanelSummary)) expandIcon={{...}} aria-controls="panel1a-content" id="panel1a-header">
      <p className="summary text">
        Advanced Options
      </p>
    </WithStyles(ForwardRef(ExpansionPanelSummary))>
    <WithStyles(ForwardRef(ExpansionPanelDetails))>
      <Connect(OptionDetails) optionType="advancedOptions" />
    </WithStyles(ForwardRef(ExpansionPanelDetails))>
  </WithStyles(ForwardRef(ExpansionPanel))>
</Fragment>

如您所见，它将 Material UI 的组件呈现为高阶组件（包裹在 WithStyles 中）。我只是想知道是否可以只执行以下操作来测试组件是否正确呈现。

// Notice how I am explicitly specifying WithStyles(ForwardRef())
expect(wrapper.find('WithStyles(ForwardRef(ExpansionPanel)')).toHaveLength(x);

我发现了一个非常相似的问题，但目前还没有发布答案。 Similar post (no answer)

先谢谢了。

编辑
为了澄清起见，我上面的建议是可行的，但我只是想知道这是否是测试 HOC 的正确方法。

另外，使用酶的dive() 并没有真正起作用，因为我正在测试的实际组件不是 HOC（它认为没有子组件可以深入研究）。

Answer 1

不确定您的建议是否可行。像这样的东西可能会更好。

const expansionPanelElements = wrapper.find(Fragment).filter(item =>item.exists('ExpansionPanel')));
expect(expansionPanelElements.toHaveLength(x));