Debugging Component Tests

Learn to debug component tests in this lesson.

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 debug component tests.

Get hands-on with 1200+ tech skills courses.