Question

在React组件的基本渲染测试中，哪种方法更扎实？

const wrapper = shallow(<MyComponent />);

expect(wrapper.exists()).to.equal(true);
expect(wrapper.find('div').length).to.equal(1);

测试渲染子组件的相同之处：

const wrapper = shallow(<MyComponent />);

expect(wrapper.find(MyChildComponent).exists()).to.equal(true);
expect(wrapper.find(MyChildComponent).length).to.equal(1);

我发现exists()更加惯用。但我发现大多数人在测试中使用length版本。有什么权衡，如果有的话？

Answer 1

exists()只是一个长度为wrapper的糖。

 exists() {
    return this.length > 0;
 }

所以使用哪一个取决于你，我认为exists()更具描述性，更愿意使用它。

Answer 2

你甚至需要第一次检查吗？当你在我的组件上做一个浅薄的时候，无论如何都应该存在包装器。

如果你确实需要它，那么我喜欢在你的第一个例子中使用exists()而不是找到孩子的div。如果您稍后将该div更改为某个范围会发生什么，即使我们只关心使包装器存在，您的测试用例也会不必要地失败。

对于第二个示例，当.exists()将来可以呈现1次或更多次时使用MyChildComponent更有意义，这取决于您的用例。

当你只希望.length出现一次时，使用MyChildComponent是有意义的，这样如果另一个dev出现并将其呈现在组件中的其他位置，测试将失败。

我使用.length的时间占90％，因为通常它更合适，并且与您想要呈现的项目数量相比，更不容易出错。

基本反应渲染测试：exists（）与length

2 个答案: