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

Question

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

使用酶，我在浅层或mount包装器上使用.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)