Alan Johnson

Posted on Feb 19, 2022 • Edited on Feb 4, 2023 • Originally published at nalanj.dev

Ava and React Testing Library

#javascript #webdev #testing

The other day I needed to test a React hook with Ava, which lead me to try to use React Testing Library, and it took me a few minutes to figure out the best way to do so because the documentation to do so was spread over several pages.

I'm working with npm, so adjust commands as needed. First, set up some packages:

npm install react react-dom
npm install --save-dev ava @testing-library/react \
  global-jsdom jsdom

Now we can write a basic test. This is a trivial example, but shows how everything comes together.

import "global-jsdom/register";

import React from "react";
import test from "ava";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

test.afterEach(cleanup);

function Button() {
  const [state, setState] = React.useState("Hello");

  return <button onClick={() => setState("World")}>{state}</button>;
}

test("setState", (t) => {
  render(<Button />);

  const button = screen.getByText("Hello");
  fireEvent.click(button);

  t.not(screen.getByText("World"), null);
});

The crucial bits for getting this all working:

import "global-dom/register"; sets up jsdom globally in our tests.
test.afterEach(cleanup); makes sure that React Testing Library gets cleaned up after each test.

The rest is just normal React Testing Library usage.