Jest is a test library for JavaScript developed by Facebook (https://jestjs.io/). Jest is widely used with React and provides lots of useful features for testing. You can create a snapshot test, where you can take snapshots from React trees and investigate how states are changing. Jest also has mock functionalities that you can use to test, for example, your asynchronous REST API calls. Jest also provides functions that are required for the assertions in your test cases.

We will first see how you can create a simple test case for a basic JavaScript function that performs some simple calculations. The following function takes two numbers as arguments and returns the product of the numbers:

// multi.js
export const calcMulti = (x, y) => {
    x * y;
}

The following code shows a Jest test for the preceding function. The test case starts with a test method that runs the test case. The test method has an alias, called it, which we will use in the React examples later. The test method gets the two required arguments—the test name and the function that contains the test. expect is used when you want to test values. The toBe function is the so-called matcher that checks whether the result from the function equals the value in the matcher. There are many different matchers available in Jest and you can find these from their documentation:

// multi.test.js
import {calcMulti} from './multi';

test('2 * 3 equals 6', () => {
  expect(calcMulti(2, 3)).toBe(6);
});

Jest comes with create-react-app, so we don't have to do any installations or configurations to start testing. It is recommended to create a folder called _test_ for your test files. The test files should have the .test.js extension. If you look at your React frontend in the VS Code file explorer, you can see that in the src folder, there is already one test file automatically created, and it is called App.test.js:

The source code of the test file is as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

The following test file creates a div element to the DOM and mounts the App component to it. Finally, the component is unmounted from div. So, it just tests that your App component can be rendered and that the test runner is working. it is an alias for the test function in Jest; the first argument is the name of the test; and the second argument is the function that is executed and tested.

You can run your tests by typing the following command into your Terminal:

npm test

Or, if you are using Yarn, type the following:

yarn test

After your tests have been executed, and everything is working correctly, you will see the following information in the Terminal:

We have now executed our first test case and it has passed.