unit-testing - 测试 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;

Answer 2

签出exists()：

expect(wrapper.find(MyComponent).exists()).toEqual(true)

Answer 3

可以直接使用跳过查找exists

expect(wrapper.exists('some-css-selector')).to.equal(true)

也可以很好地与其他 React 组件一起使用

import SomeOtherReactElement from 'path/to/SomeOtherReactElement';

...
...

expect(wrapper.exists(SomeOtherReactElement)).to.equal(true)