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

使用Jest和酶测试材料UI组件

1 个答案: