JavaScript frameworks and libraries are increasingly becoming popular day by day. Depending on the choice of a JavaScript framework we often decide a test runner which is most compatible or recommended with our framework. In this blog, we’ll talk about Jest. We mostly use Jest to test ReactJS components.

Introduction

Jest is a JavaScript test framework. Jest is used to organize and execute tests. Test framework allows you to run the test cases and test suites. Below is an example of a test suite-

function helloWorld() {

return 'Hello World';

}

// Test Suite

describe('HelloWorld' , () => {

// Test case

test('test helloWorld()' , () => {

expect(helloWorld()).toEqual('Hello World ');

});

})

Here ‘expect’ is an assertion library, used to check the correctness.

We’ll also use Enzyme. An enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.

Why should I choose Jest?

We already have Jasmine, Mocha, then why to go for Jest? To begin with here are some of its enticing features-

• Jest is already bundled with JSDOM to enable DOM testing.
• It supports running tests in parallel; so it is faster.
• It supports Promise too.
• It easily tests React apps.
• It provides out of the box code coverage.
• It is backed by Facebook. 

Getting Started

Environment setup

1. Get some sample ReactJS application or clone https://github.com/haggarwal90/product-catalog-reactjs.git

2. Go to the project and execute the following command
→ Yarn add jest babel-jest enzyme enzyme-adapter-react-15

3. Define Jest configuration, create jest.config.js at the root and add the below code-

module.exports = {

'setupFiles': ['./test/jest.setup.js'], // setup the test environment

'transform': {

'.*': '/node_modules/babel-jest',

},

};

Note: Jest’s configuration can be defined in the package.json file of your project, or through a jest.config.js file or through the –config option.

4. Create test directory at the root. Inside test folder create jest.setup.js and add the following code-

import React from 'react';

import Adapter from 'enzyme-adapter-react-15';

import { shallow, render, mount, configure } from 'enzyme';

configure({ 'adapter': new Adapter() });
global.intl = intl;

global.shallow = shallow;

global.render = render;

global.mount = mount;

5. Add script to package.json
→”test”: “jest”

Let’s begin writing our first test suite

1. Go to component folder and create a test file for any component.
Example for product.jsx -> product.test.jsx and add below test-

import React from "react";
import { Products } from './Products'

describe('', () => {

test('Component Mount test', () => {

const component = shallow(Products>Products>);

expect(component.find('h3').text()).toEqual('Play with products');

})

});

2. Run npm run test and you will see the test pass successfully.

3. Similarly, you can add more test cases like “Component with correct default state” and “event/action simulation”

describe('', () => {

test('Component Mount test', () => {

const component = shallow(Products>Products>);

expect(component.find('h3').text()).toEqual('Play with products');

});

test('defaultState', () => {

const component = shallow(Products>Products>);

expect(component.state().buttonlabel).toEqual('Add Product');

});

test('editProducts', () => {

const component = shallow(Products>Products>);

component.instance().getProduct(0);

expect(component.state().buttonlabel).toEqual('Edit Product');

});

})

Conclusion

We have learned about Jest, the importance of Jest, Jest environment setup & configurations and wrote some basic test cases. We’ll do more like snapshot testing, mocking data/services, code coverage, etc in upcoming blogs.

References

Jest official documentation.