Debugging Component Tests

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.

Debugging with Visual Code debugger

Component tests can ...