Question

我想测试一个简单的Material UI选择表单，该表单使用FormControl并随Styles一起导出。我的测试用例非常简单，例如，我想断言我的组件呈现了一个孩子。我尝试以下断言：

expect(wrapper.find('InputLabel')).toEqual(true);

但是，此断言仅因InputLabel包装在 WithStyles AND WithFromControlContext 中而失败（请参见调试输出）：

<WithStyles(FormControl) id="my-control-id">
      <WithStyles(WithFormControlContext(InputLabel)) htmlFor="my-control-id">
        My Control Label
      </WithStyles(WithFormControlContext(InputLabel))>
      ...
    </WithStyles(FormControl)>

是否有任何方法可以忽略掉所有环绕在它周围的HOC组件，来测试InputLabel子项的存在？

Answer 1

除了wrapper.find()外，Enzyme还提供wrapper.findWhere()-给它提供一个功能，它返回渲染树中fn(node) === true的每个节点。

（不要与wrapper.filterWhere()混淆，const findWithStyles = (wrapper, name) => { // Only matches if there are no letters on either side // i.e.: Button, Styled(WithStyles(ForwardRef(Button))) // not: MyButton, Buttons const matchExp = RegExp(`(?<![a-zA-Z])${name}(?![a-zA-Z])`); return wrapper.findWhere((node) => { const nodeName = node.name(); // The extra check here is for raw HTML text, for which .name() is null return nodeName && nodeName.match(matchExp); }); // Or, if your environment supports optional chaining (a?.b?.c): // return wrapper.findWhere(node => node.name()?.match(matchExp)); }; const buttons = findWithStyles(wrapper, 'Button');只看“当前包装器的节点”，这意味着我可以说直接的孩子）

我在当前项目中使用了该实用程序：

--filter

Answer 2

我如何对包含在HOC中的组件进行这样的测试，是我同时导出了已包装的组件和未包装的组件。

所以，我有

export class MyComponent extends React.Component {
  // All the code
}

export default withStyles(MyComponent);

因此，在我的测试中，我导入了非包装的组件

import {MyComponent} from './MyComponent';

在我的代码中，我导入默认的导出

import MyComponent from './MyComponent';

测试React组件时忽略HOC

2 个答案: