Debugging in React testing library

Writing testing for react applications has been made easy with the react-testing-library testing framework. It provides a kitchen sink of utility function that can answer any of your need while testing.

One of question we ask ourselves when we are writing tests for our applications is "Why is my test not working?"; though a banal question, this question can be the reason why you continue writing your test or you put a hold to it.

The main reason for this question is the fact that your test is failing to match the code it is testing. React-Testing-Library provides a function to debug our tests and get an insight on what is failing.

Debugging a component

With the assumption that we have setup of our code with the steps from react-testing-library setup page, let's take a look at this component and its test.

export default function Table({name="", list = [] }) {
  return (
    <div>
<h1>List of {name}</h1>
      {list && (
        <ul>
          {list.map((item) => (
            <li key={Math.random() * 10}>{String(item.value).slice(0,5)}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

The component displays a list of item in an unordered list. Let's write a test to make sure we have the items displaying.

import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("it displays table with heroes", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getByText } = render(<Table name="Heroes" list={heroes} />);
    expect(getByText("Heroes")).toBeInTheDocument();
    expect(getByText("Superman")).toBeInTheDocument();
    expect(getByText("Batman")).toBeInTheDocument();
  });
});

The above test will fail and we may be wondering why. The quickest way to debug this is to use the screen.debug() function made available by react-testing-library

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("Table is working", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getByText } = render(<Table list={heroes} />);
    screen.debug();
    // expect(getByText("Super")).toBeInTheDocument();
  });
});

The above test will return the following log

<body>
  <div>
    <h1>List of Heroes</h1>
    <div>
      <ul>
        <li>
          Super
        </li>
        <li>
          Batma
        </li>
        <li>
          Docto
        </li>
      </ul>
    </div>
  </div>
</body>

Debugging specific component

You can also use the debug method to log specific elements of the resulting DOM component.

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("Table is working", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getAllByRole } = render(<Table list={heroes} />);
    const items = getAllByRole("listitem");
    screen.debug(items)
    // expect(items[0]).toHaveTextContent("Super");
  });
});

The code above gets the list of heroes using the getAllByRole method and with the help of debug, we log only that part of the component we are interested in.

The debug method is a great tool to help you visualise the DOM output of a component under test and provide a good insight when troubleshooting failing tests.

Blog

Debugging in React testing library

Edem Agbenyo

Debugging a component

Debugging specific component

Join Our Newsletter. No Spam, Only the good stuff.

Related