如何测试子组件是否已呈现？

Question

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

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

反应测试库中这个测试的等价物是什么？我发现的所有在线示例都只涵盖了寻找 dom 元素的非常简单的测试——没有一个包含渲染子组件的示例。如何找到子组件？

原文由 riscos3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

要么

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

更新：示例

// Child Component
function ChildComponent() {
    return <div>Child Element</div>;
};

// Parent
export default function Parent() {
    return (
        <div className="App">
            <ChildComponent />
        </div>
    );
}

测试：

 import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import Parent from "./App";

test("test child component", () => {
  const { getByText } = render(<Parent />);
  expect(getByText(/child element/i)).toBeInTheDocument();
});

原文由 Amit Chauhan 发布，翻译遵循 CC BY-SA 4.0 许可协议