用Jest和酶测试材料UI组件

Question

我试图测试一个反应组件，它使用<ExpansionPanel />作为它的子组件与Jest和酶。

作为参考，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的组件呈现为高阶组件(包装在WithStyles中)。我只是想知道，是否可以这样做，以测试组件是否正确呈现。

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

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

先谢了。

编辑

为了澄清，我上面的建议是有效的，但我只是想知道这是否是测试HOCs的正确方法。

此外，使用酶的dive()并不真正有效，因为我正在测试的实际成分不是临时的(它认为没有子成分可供深入研究)。

Answer 1

不知道你的建议会不会奏效。像这样的事情可能会更好。

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