Question

检查React组件是否包含带有Enzyme + Jest的东西的模式似乎是这样的：

expect(shallow(<Field title="hello" />).contains(<p id="hello"></p>)).toBe(true);

我用这种代码遇到的主要问题是，如果期望失败，我不知道问题出在哪里。因为它使用“期望布尔值是布尔值”模式，所以我得到的唯一错误是：

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

它并没有真正的帮助。测试React元素是否包含某些东西时，有没有办法获得更精确的错误？

Answer 1

是的，有更多的方法可以检查元素是否存在于组件中。如果测试用例失败，则可以调试包装器以检查出了什么问题。 .debug（）不会指出错误，但我认为这将使调试变得非常容易，因为您可以得到shallow / mount呈现的内容。

以下命令将帮助您调试包装器。

const wrapper = shallow(<Field title="hello" />);
console.log(wrapper.debug());

我创建了一个沙箱来演示相同的内容，我在包装器上使用“ contains”和“ find”来检查p是否以id作为“ hello”出现，并且在控制台上您也可以看到包装器的输出。 debug（）