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

Question

在对 React 组件进行单元测试时，我经常根据 prop 的存在或内容来检查子节点是否存在。

使用 enzyme，我在 shallow 或 mount wrapper 上找到使用 .find 的元素，然后检查它的长度是否为 1。使用 chai，这看起来像这样：

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

有没有更好的检查方法

Answer 1

假设您正在通过示例中的选择器测试是否存在，并且需要使用 returns 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()，其中 returns 布尔值：

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

Answer 2

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)

What is the simplest way of testing that a React Component contains a html node with enzyme?