How to start with test cases in React using Jest?
Tags: react, javascript, testing, testdev
Published: 2021-06-11 13:13:23

What is Jest?

This particular framework has been ranked as the most popular JavaScript testing framework by the stateofjs survey. Facebook has created jest, and the main emphasis with this framework happens to be on simplicity. It offers decent cross-browser support and is used on a wide scale with Selenium for automated testing.

An integrated framework is provided by Jest, which does not need any experience when it comes to the configuration. This tool is all set to use, and it would be possible to set it up instantaneously by running the command-

npm install –save-dev jest
The pros:

    One can consider Jest to be an exceptionally well documented and quick performing testing framework.

    A powerful developer tooling is provided by Jest with reduced error-prone code.

    It is also possible for this framework to execute visual regression tests. It captures screenshots for doing this. During the development of an application by using React JS, this particular feature is quite useful for preventing UI bugs. This is done by recording the rendered component’s screenshot and comparing it afterward with components that have been rendered in the future. It is possible to update the screenshots with the addition of new features.

 
The cons

    Not much tooling or libraries are supported by Jest as compared to Jasmine and other frameworks.

    Individuals who are not comfy with this framework have asserted that it is difficult to learn Jest.

    For bigger snapshot files, snapshot testing is not possible with Jest.

 
Can Jest be considered to be the best JavaScript testing framework?

Your requirement will figure out whether it will be better to use Jasmine or Jest for your project. In case the project needs debugging the test cases in an IDE that is not supported by Jest, then your best choice would be Jasmine. However, it will be advisable to try out Jest, given that Facebook has been making lots of investments at present on this framework. Moreover, the React developers are also getting a positive experience after using Jest.

 
Also Read: Top 3 JavaScript Testing Frameworks with their Pros and Cons

 
In this blog, we have mentioned about How to start with test cases in React using Jest? Let’s know below :
Prerequisite :

Let’s create sample react application by using following commands:

    npx create-react-app my-app

    cd my-app

    npm start

 
Configuration :

    Check the react version in the “package. Json” file (“react”: “^17.0.2”).

    There are too many libraries available that we can use with Jest for test cases but react OOTB provides “@testing-library/jest-dom” so we are using this for our test cases.

    If this library not added in package.json you can add by  “npm install –save-dev @testing-library/jest-dom”

    @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

    Don’t go with the “enzyme” library as it’s not compatible with react 16+ version.

 
Usage :

    Need to import @testing-library/jest-dom in react project setup file once and you are good to go with it.

    If you create a project with “create-react-app” then there is one file “setupTests.js” already created under src/ folder with import of this library.

    If not then create “src/setupTests.js” file with following import.

    import "@testing-library/jest-dom";

 
Setup :

    Before continuing, let’s learn some basics. Some key things are used in the following example, and you’ll need to understand them.

Let's know here step-by step test cases and result: https://www.rlogical.com/blog/how-to-start-with-test-cases-in-react-using-jest/