How do I test that a child component is rendered?

Question

In enzyme you can check for the existence of child component like this:

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

What is the equivalent to this test in react testing library? All the online examples I find just cover very simple tests looking for dom elements - none include examples of that render child components. How do you find a child component?

Answer 1

You shouldn't check if your child component is rendered or not, because it's testing implementation details (which testing library doesn't encourage you to do).

You can check some text from your child component is rendered or you can give data-testid to your wrapper element in child and then use .toBeInTheDocument from @testing-library/jest-dom

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

or

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

Updated: Example

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

Test:

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(); });