Search⌘ K
AI Features
Home
Courses
Testing React Apps with Jest and React Testing Library

Debugging Component Tests

Explore how to debug React component tests by using Visual Studio Code debugger and React Testing Library's screen.debug function. Understand how to inspect DOM elements during tests and leverage automatic DOM output on test failures to improve test reliability and troubleshooting.

We'll cover the following...

A test to debug

The starter project for this lesson contains an ErrorMessage component and a test that will be familiar from previous lessons.

test("Should render correct message when message prop passed", () => {
  const { container } = render(<ErrorMessage message="test" />);
  expect(screen.getByText("test")).toBeInTheDocument();
});

The difference from our previous lessons is that a container variable has been destructured from the return value of render. The container function will contain a reference to the container element for the test elements. This variable isn’t useful for this test but will help us learn how to ...