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?

Maybe `expect(wrapper).toContain('ChildComponent')`? – A Jar of Clay Feb 03 '20 at 15:20 — A Jar of Clay, Feb 03 '20 at 15:20

Amit Chauhan · Answer 1 · 2021-05-10T08:09:13.263

6

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

edited May 10 '21 at 08:09

answered Feb 04 '20 at 07:00

Amit Chauhan

3,990
1
15
30

2

can i get a full sample of the test? – Nkoro Joseph Ahamefula Jun 25 '20 at 12:40
1

Don't you want the parenthesis to be like this: `expect(getByText(/some text/i)).toBeInTheDocument();`? – ninja star May 06 '21 at 16:25
1

@ninjastar Thank you for pointing out that. Update answer. – Amit Chauhan May 06 '21 at 16:28
@NkoroJosephAhamefula It totally depends on your use case. This is just an example that how to test if child component is rendered or not. I will try to create simple example this weekend. – Amit Chauhan May 06 '21 at 16:30

score 2 · Answer 2 · answered Feb 03 '20 at 15:19

since query* return null if element is not found you may just

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

Also getBy* throws if element is not find. So next one should work as well

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

How do I test that a child component is rendered?

2 Answers2