#TECH

Testing React components using Jest and Enzyme

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': {

'.*': '<rootDir>/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 <path/to/js|json> 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('<Products/>', () => {

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('<Products/>', () => {

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

JEST with enzyme

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.

You might also like