ReactJS - Testing

Testing is one of the processes to make sure that the functionapty created in any apppcation is working in accordance with the business logic and coding specification. React recommends React testing pbrary to test React components and jest test runner to run the test. The react-testing-pbrary allows the components to be checked in isolation.

It can be installed in the apppcation using below command −

npm install --save @testing-pbrary/react @testing-pbrary/jest-dom

Create React app

Create React app configures React testing pbrary and jest test runner by default. So, testing a React apppcation created using Create React App is just a command away.

cd /go/to/react/apppcation 
npm test

The npm test command is similar to npm build command. Both re-compiles as and when the developer changes the code. Once the command is executed in the command prompt, it emits below questions.

No tests found related to files changed since last commit.
Press `a` to run all tests, or run Jest with `--watchAll`.

Watch Usage
   › Press a to run all tests.
   › Press f to run only failed tests.
   › Press q to quit watch mode.
   › Press p to filter by a filename regex pattern.
   › Press t to filter by a test name regex pattern.
   › Press Enter to trigger a test run.  

Pressing a will try to run all the test script and finally summaries the result as shown below −

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.312 s, estimated 12 s
Ran all test suites.

Watch Usage: Press w to show more. 

Testing in a custom apppcation

Let us write a custom React apppcation using Rollup bundler and test it using React testing pbrary and jest test runner in this chapter.

First, create a new react apppcation, react-test-app using Rollup bundler by following instruction in Creating a React apppcation chapter.

Next, install the testing pbrary.

cd /go/to/react-test-app 
npm install --save @testing-pbrary/react @testing-pbrary/jest-dom

Next, open the apppcation in your favorite editor.

Next, create a file, HelloWorld.test.js under src/components folder to write test for HelloWorld component and start editing.

Next, import react pbrary.

import React from  react ;

Next, import the testing pbrary.

import { render, screen } from  @testing-pbrary/react ; import  @testing-pbrary/jest-dom ;

Next, import our HelloWorld component.

import HelloWorld from  ./HelloWorld ;

Next, write a test to check the existence of Hello World text in the document.

test( test scenario 1 , () => {
   render(<HelloWorld />);
   const element = screen.getByText(/Hello World/i);
   expect(element).toBeInTheDocument();
});

The complete source code of the test code is given below −

import React from  react ;
import { render, screen } from  @testing-pbrary/react ;
import  @testing-pbrary/jest-dom ;
import HelloWorld from  ./HelloWorld ;

test( test scenario 1 , () => {
   render(<HelloWorld />);
   const element = screen.getByText(/Hello World/i);
   expect(element).toBeInTheDocument();
});

Next, install jest test runner, if it is not installed already in the system.

npm install jest -g

Next, run jest command in the root folder of the apppcation.

jest

Next, run jest command in the root folder of the apppcation.

PASS  src/components/HelloWorld.test.js
   √ test scenario 1 (29 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.148 s
Ran all test suites.