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

时间:2020-01-23 20:11:18

标签: reactjs jestjs material-ui

我正在尝试通过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(它认为没有任何子组件可以进入)。

1 个答案:

答案 0 :(得分:1)

不确定您的建议是否可行。这样的事情可能会更好。

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