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

Answer 2

You can use @testing-library/jest-dom library.

Component:

<div role="root">       
    <div data-testid="parent">
        <div data-testid="child">
            content
        </div>
    </div>
</div>

Test:

import '@testing-library/jest-dom'
import {render} from '@testing-library/react';

describe('My component', () => {
    test('should render component2', () => {
        const { getByRole, getByTestId } = render(<Component/>);

        const root = getByRole('root');
        const parent = getByTestId('parent');
        const child = getByTestId('child');

        expect(root).toContainElement(parent);
        expect(parent).toContainElement(child);
        
        expect(child).not.toContainElement(parent); // Pass
        expect(child).toContainElement(parent); // Throw error!    
    });
});

Another solution is to use within function from @testing-library/react library:

import { within } from '@testing-library/react';
...

expect(within(parent).queryByTestId('child')).not.toBeNull();

Answer 3

I used React Test Renderer for that purpose:

import TestRenderer from 'react-test-renderer';

import ItemList from 'components/ItemList';
import LoadingIndicator from 'components/LoadingIndicator';

test('renders loading indication', () => {
    const testRenderer = TestRenderer.create(
        <ItemList items={[]} isLoading={true}/>
    );
    const testInstance = testRenderer.root;
    testInstance.findByType(LoadingIndicator);
});

I don't think that it's "testing implementation details", quite the opposite - LoadingIndicator component can be modified without need to fix the test case.

Answer 4

I agree with everyone who said, that checking for either text or a test-id inside a child component is testing implementation details.

But we could use mocking, to get rid of the implementation details of the child component.

The code to test:

import { ChildComponent } from 'child-from-somewhere';

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

The test code that checks, if ChildComponent was rendered:

import { render } from "@testing-library/react";
import React from "react";
import { Parent } from "./parent";

jest.mock("child-from-somewhere", () => ({
    ChildComponent: () => <div data-testid="ChildComponent">ChildComponent</div>,
}));

describe("ChildComponent component", () => {
    it("should be in the document", () => {
        const { getByTestId } = render(<Parent />);
        expect(getByTestId("ChildComponent")).toBeInTheDocument();
    });
});

That way, the test stays independent of changes that are made inside of ChildComponent.

Answer 5

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');