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)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up