DEV Community

Alex Adam
Alex Adam

Posted on • Originally published at alexadam.dev

2 1

How to test a React App, with Jest and react-testing-library

How to test a React App, with Jest and react-testing-library

Prerequisites: An existing React app.

You can find the full source code @ github: https://github.com/alexadam/project-templates/tree/master/projects/react-app-tests

Setup

Install Jest and react-testing-library

yarn add --dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

In the project's root folder, create a file named jest.config.js and add:

module.exports = {
  roots: ["./src"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: [
    "@testing-library/jest-dom/extend-expect"
  ],
  testRegex: "^.+\\.(test|spec)\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};
Enter fullscreen mode Exit fullscreen mode

Update package.json by adding a new script entry:

"scripts": {
    ...
    "test": "jest",
    ...
Enter fullscreen mode Exit fullscreen mode

Create a Test

We'll test the basic React app created from scratch here: https://alexadam.dev/blog/create-react-project.html

To test the Numbers component, create a file named numbers.test.tsx, in the src folder:

import React, { Props } from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import Numbers from "./numbers";

describe("Test <Numbers />", () => {

  test("Should display 42", async () => {
    render(<Numbers initValue={42} />);
    const text = screen.getByText("Number is 42");
    expect(text).toBeInTheDocument();
  });

  test("Should increment number", async () => {
    const { container }  = render(<Numbers initValue={42} />)

    const incButton =  screen.getByText('+')

    fireEvent(
      incButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    )

    const text = screen.getByText("Number is 43");
    expect(text).toBeInTheDocument();
  });

  test("Should decrement number", async () => {
    const { container }  = render(<Numbers initValue={42} />)

    const decButton =  screen.getByText('-')

    fireEvent.click(decButton)

    const text = screen.getByText("Number is 41");
    expect(text).toBeInTheDocument();
  });

});
Enter fullscreen mode Exit fullscreen mode

Run the tests:

yarn test
Enter fullscreen mode Exit fullscreen mode

See the results:

$> yarn test
yarn run v1.22.17
$ jest
 PASS  src/numbers.test.tsx
  Test <Numbers />
    ✓ Should display 42 (29 ms)
    ✓ Should increment number (14 ms)
    ✓ Should decrement number (8 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.893 s
Ran all test suites.
✨  Done in 3.88s.
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More