Debugging in React testing library
Tags: testing, react, reacttestinglibrary, debugging
Published: 2022-01-29 21:35:43

Writing testing for react applications has been made easy with the [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) 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](https://testing-library.com/docs/react-testing-library/setup), let's take a look at this component and its test.


```js
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.

```js
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

```js
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.

```js
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.