在反应测试库中，如何检查子组件是否已渲染？

Question

在酶中，您可以像这样检查子组件的存在：

expect(wrapper.find(ChildComponent)).toHaveLength(1)

React测试库中与此测试等效的内容是什么？我在网上找到的所有示例仅涵盖寻找dom元素的非常简单的测试-没有一个包含渲染子组件的示例。您如何找到子组件？

Answer 1

您不应检查子组件是否已呈现，因为它正在测试实现细节（哪个测试库不鼓励您这样做）。

您可以检查子组件中的某些文本是否已呈现，也可以将data-testid赋予子组件中的包装器元素，然后使用@ testing-library / jest-dom中的.toBeInTheDocument

expect(getByText(/some text/i).toBeInTheDocument();

或

expect(getByTestId('your-test-id').toBeInTheDocument();

Answer 2

由于query*返回null（如果找不到元素，您可能只是

expect(queryByTestId('test-id-you-provided')).toEqual(null);
expect(queryByTestId('some-other-test-id-you-provided')).not.toEqual(null);

如果找不到元素，也将getBy*引发。所以下一个应该也能工作

getByTestId('test-id-you-provided');