Pic Courtesy — Google Images

Unit Testing of basic React App

React + Jest + Enzyme

Quick Overview -

React A JavaScript library for building the user interface. Read more at — https://reactjs.org/

Jest is a JavaScript unit Testing Framework . Read more at — https://jestjs.io/

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components output. In short, it helps to render your react component in a same way it would be rendered on browser. Read more https://airbnb.io/enzyme/

Unit Testing -

What — As the name suggest, It is testing your smallest unit of code in isolation. This can be done by writing test cases using unit testing frameworks like jest etc.

Why — There are lot of benefits of unit testing but the major one is making the coding process more agile. Specially in large code base, changing old piece of code is bit risky and need more efforts. If you have unit test cases in place for that old piece of code then you can change that more confidently.

How —

1)Lets quickly create a react app using create-react-app( boiler plate provided by Facebook itself )-

create-react-app react-app-unit-testing

2)As this boiler plate already have the hidden configurations and built in jest installation, So no need to install jest

3)To test a React Component you need to install enzyme and its adapter separately by below commands

npm i -D enzyme
npm i -D enzyme-adapter-react-16

4)Lets write a basic test case of checking whether the component is getting rendered or not. Delete everything from src/App.test.js file and write below code

import React from 'react';  // 1
import App from './App';    // 2
import Enzyme,{ shallow } from "enzyme"; // 3
import Adapter from "enzyme-adapter-react-16"; // 4
Enzyme.configure({ adapter: new Adapter() });  // 5
const enzymeWrapper = shallow(<App />);  // 6
describe("<App />", () => {   // 7
 test("should render successfully", () => {  // 8
    expect(enzymeWrapper).toBeDefined();  // 9
  });
});

// 1 Required by enzyme when you pass component in shallow,mount rendering

// 2 Importing component which we want to test

// 3 Required shallow rendering i.e. render only current component and not its child where as mount will render whole component tree. Using Mount is not recommended for doing unit testing and it is costly method as well. Enzyme has the configure method which uses adapter for rendering the component

// 4 Adapter required for rendering the react component

// 5 Configuring the adapter

// 6 shallow render the component

// 7 It create a block that groups similar test cases. Or you can say a test suite which has multiple test cases

// 8 It is a single test case

// 9 Asserting something for any specific value

Lets add some more test cases

test(“should contain div with className as App”, () => {
 expect(enzymeWrapper.find(“.App”)).toHaveLength(1);
});
test(“should contain <img/ > with alt as logo”, () => {
 expect(enzymeWrapper.find(“img”).prop(“alt”)).toBe(“logo”); // 1 
});

// 1 In above example “find” returns a new wrapper that wraps the found nodes.In react terminology we call attributes as props

5)Now if you want create new test case file for another component then you need to write all the above adapter setting again i.e.

Enzyme.configure({ adapter: new Adapter() });

We can avoid this and put all these configurations in a separate file src/setupTests.js as create-react-app only uses this file to pass the configuration to jest

Lets create the file.

import Enzyme from “enzyme”;
import Adapter from “enzyme-adapter-react-16”;
Enzyme.configure({ adapter: new Adapter() });

and remove above code from you test files.

6)Now last step is to run above test cases, you can directly type below command, as create- react-app already adds this script in package.json file

npm test

You can refer this https://github.com/harshmons/react-app-unit-testing as well for a complete setup

Note : For extensive test cases like testing Async Action Creators, Redux connected components I have made another blog with another sample application https://medium.com/@harshverma04111989/extensive-unit-testing-for-react-redux-app-f9224c757ce6

Happy Unit Testing :)