测试 React 组件包含带有酶的 html 节点的最简单方法是什么？

Question

当单元测试反应组件时，我经常根据道具的存在或内容检查子节点的存在。

使用酶，我找到了.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()，它返回布尔值：

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