What is Jest in React?
React is a library for building user interfaces. It is a component based library, meaning the user interfaces are built as components which can be reused and customized.
Jest is a framework built on top of Jasmine. Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other library for testing. Jest provides additional features on top of Jasmine.
Some of the features provided by Jest are as follows
- Parallel run - The test cases are run in parallel, which reduces time taken to run all the unit test cases.
- Snapshot testing - In snapshot testing, the snapshot of the component is stored in serialized format. This copy is used to test with snapshots of component.
- Zero config - All of the recommended defaults are already preset in Jest. So its easier to start.
Before we see the relationship between Jest and React, lets make few points clear
- Jest is framework/library agnostic - Jest can be used to test angular, vue or plain javascript code as well.
- Jest is a test runner - You use jest-cli to run the test cases.
What is Jest in React?
Jest is only a framework independent testing library which is used to run the test cases. The only link between Jest and React is that both of these libraries are maintained by Facebook.
Difference - Test runners and helper libraries
There are 2 main libraries when writing unit test cases - test runner and helper libraries. Libraries like Jest are test runners, they provide the framework to write the unit test cases. You can use Jest to write test cases for Angular. Libraries like Enzyme and React Testing Library are helper libraries. You can read more about the tutorials here Enzyme Tutorials and React Testing Library Tutorials. They provide features like bootstraping the React app, access to the state and props of the bootstrapped app (Enzyme), access to querying the DOM of the app (Enzyme and React Testing Library).
All the features provided by Jest like spies, mocking, snapshot testing, parallel execution are available for other JavaScript frameworks too.
Here is an example
import React from 'react';
import { render } from '@testing-library/react';
import App from './App.js';
describe('App', () => {
it('should display hello world text', () => {
const wrapper = render(<App />);
expect(wrapper.queryAllByText('Hello World')).toHaveLength(1);
})
it('should show name on click of button', () => {
const wrapper = render(<App />);
expect(wrapper.queryAllByText('Name')).toHaveLength(0);
wrapper.findByTestId('button').click();
expect(wrapper.queryAllByText('Name')).toHaveLength(1);
})
})
In the above code, the Jest provides global variables such as describe, it and many others like test. These variables accept the name and the callback function, that contains the test. Jest also provides expect, which is used for assertion.
Jest provides helper utilities for spying on object, timer functions, ability to mock modules.
Now that you have understood what role does Jest play in React, you can read more about features of Jest with examples from the below post.
Mocking the timers
We have timer functions inside our code. Suppose that we have a timeout of 10 seconds in our code, then writing the test case which will wait for 10 seconds to do the assertion will result in delay of finishing the test case.
Thankfully, Jest has a solution for this. It provides fake timers, which can be used to speed upon the time. Refer to the tutorial below to learn more.
Mocking the http api async code
We already have detailed tutorial to understand the mocking of async code like http calls. Please refer to the tutorials below.
Mocking the 3rd party libraries using only Jest
Axios is a popular library that is used to make the http calls. It is possible to use jest to mock this library also. This guide will serve as an example on how to mock any 3rd party library modules.