@testing-library/react 中的 toBeInTheDocument 和 getBy* 有什么区别

Question

有区别吗

expect(screen.queryByText('<something>')).toBeInTheDocument();

和

screen.getByText('<something>');

(具体getBy*和queryBy*操作无关)

在react-testing-library?

Answer 1

getByText 尝试查找节点并在找不到时抛出错误。这将导致测试立即失败。

另一方面，

queryByText 如果无法找到节点，则 return null。

假设您在渲染的组件中有文本 <something>，您可以断言它是否已被渲染。

如果确定文本已经被渲染，那么你可以简单地使用getByText

expect(screen.getByText('<something>')).toBeInTheDocument();

测试会通过。

如果对于该场景，文本未呈现，则上述断言将引发错误并使测试用例失败。

在这种情况下 queryByText 文本最有意义

未渲染时

expect(screen.getByText('<something>')).not.toBeInTheDocument(); // throws an error

expect(screen.queryByText('<something>')).not.toBeInTheDocument(); // asserts as true

---

Output comparison