unit-testing - 测试 React 组件是否包含带 enzyme 的 html 节点的最简单方法是什么？

Question

当单元测试 react 组件时，我经常根据 Prop 的存在或内容检查子节点是否存在。

使用 enzyme ，我在浅层或安装包装器上使用 .find 找到元素，然后检查其长度是否为 1。使用 chai，这将如下所示:

const wrapper = shallow(<MYReactComponent/>);
const innerNode = wrapper.find('some-css-selector');
expect(innerNode.length).to.equal(1);

有没有更好的检查方法

Answer 1

假设您正在通过选择器测试是否存在，如示例所示，并且需要使用返回 ShallowWrapper 的方法，那么您需要使用 .length。但您不一定需要单独的语句:

const wrapper = shallow(<MYReactComponent />);
expect(wrapper.find('some-css-selector').length).to.equal(1);

就此而言，如果您愿意，您可以将整个事情合并到这样的情况中:

expect(
  shallow(<MYReactComponent />)
  .find('some-css-selector').length
).to.equal(1);

如果您基于组件类型/属性进行测试，那么您可以使用 contains()，它返回 bool 值:

const wrapper = shallow(<MYReactComponent />);
expect(wrapper.contains(
  <div class="something">
    <span>content</span>
  </div>
)).to.be.true;