Basic Tutorial: Testing React Components with Jest

Testing code is a confusing practice for many developers. This is understandable, as writing tests requires more effort, time, and the ability to foresee possible use cases. Startups and developers working on small projects often tend to ignore testing altogether due to lack of resources and manpower.

However, I think you should test your components for a few reasons:

1. It gives you more confidence in your code.
2. Testing can improve your work efficiency.

React is no different. Tests can provide stability and consistency when your entire application starts to turn into a bunch of components that are difficult to maintain. Writing tests from day one will help you write better code, catch bugs easily, and maintain a better development workflow.

In this article, I’ll walk you through everything you need to know to write tests for React components. I'll also cover some best practices and techniques. let's start!

Testing components in React

Testing is the process of verifying that our test assertions are correct and that they remain correct throughout the lifetime of the application. A test assertion is a Boolean expression that returns true unless there is an error in the code.

For example, the assertion could be as simple as this: "When the user navigates to /login, the schema with id #login should be rendered." So if it turns out that you If you mess up the login component in this way, the assertion will return false. Assertions are not limited to what is rendered, you can also make assertions about how your application responds to user interactions and other operations.

Front-end developers can use many automated testing strategies to test their code. We will limit our discussion to three popular software testing paradigms in React: unit testing, functional testing, and integration testing.

unit test

Unit testing is one of the testing veterans that is still popular in testing circles. As the name suggests, you'll test individual pieces of code to verify that they function independently as expected. Because of React’s component architecture, unit testing is a natural choice. They're also faster because you don't have to rely on a browser.

Unit testing helps you think about each component in isolation and treat them as functions. Unit tests for a specific component should answer the following questions:

1. Are there any props? If so, what does this do to them?
2. What components does it render?
3. Should it have a status? When or how to update status?
4. Is there a procedure that should be followed when installing or uninstalling or when interacting with the user?

function test

Functional testing is used to test the behavior of a part of the application. Functional tests are usually written from the user's perspective. A feature is usually not limited to a single component. It can be a complete form or an entire page.

For example, when you build a registration form, it might involve components for form elements, alerts, and errors (if any). Components that are rendered after the form is submitted are also part of this functionality. This does not require a browser renderer as we will be testing with an in-memory virtual DOM.

Integration Testing

Integration testing is a testing strategy in which all individual components are tested as a group. Integration testing attempts to replicate the user experience by running tests on an actual browser. This is much slower than functional and unit tests because each test suite is executed on the live browser.

In React, unit tests and functional tests are more popular than integration tests because they are easier to write and maintain. That's what we'll cover in this tutorial.

Know your tools

You need certain tools and dependencies to start unit and functional testing of your React application. I've listed them below.

There is a testing framework

Jest is a testing framework that requires zero configuration, making it easy to set up. It is more popular than testing frameworks like Jasmine and Mocha because it is developed by Facebook. Jest is also faster than other approaches because it uses a clever technique to parallelize test runs across worker threads. In addition to this, each test is run in a sandbox environment to avoid conflicts between two consecutive tests.

If you are using create-react-app, it comes with Jest. If not, you may need to install Jest and some other dependencies. You can read more about it on the official Jest documentation page.

React Test Renderer

Even if you are using create-react-app, you need to install this package to render snapshots. Snapshot tests are part of the Jest library. Therefore, you can use a test renderer to quickly generate serializable HTML output from a virtual DOM instead of rendering the entire application's UI. You can install it as follows:

yarn add react-test-renderer

ReactTestUtils and Enzyme

react-dom/test-utils Contains some testing utilities provided by the React team. Alternatively, you can use the Enzyme package released by Airbnb. Enzyme is much better than ReactTestUtils because it is easy to assert, manipulate, and iterate over the output of React components. We'll start testing using React utils and then transition to Enzyme.

To install Enzyme, run the following command.

yarn add enzyme enzyme-adapter-react-16

Add code to src/SetupTests.js.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

create-react-app page.

Set up the demo application and organize the tests

We will write tests for a simple demo application that displays a master/detail view of a product list. You can find the demo application in our GitHub repository. The application consists of a container component named ProductContainer and three presentation components: ProductList, ProductDetails, and ProductHeader .

Directory Structure

.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── ProductContainer.js
│   │   ├── ProductDetails.jsx
│   │   ├── ProductHeader.js
│   │   ├── ProductList.jsx
│   ├── index.js
│   └── style.css

This demo is great for unit testing and functional testing. You can test each component individually and/or test the entire product list functionality.

After downloading the demo, create a directory named __tests__ in /src/components/. You can then store all test files related to this feature in the __tests__ directory. Testers usually name their test files .spec.js or .test.js, for example, ProductHeader.test.js or >ProductHeader .spec.js.

describe('ProductHeader', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

expects(true).toBeTruthy();

yarn test

expects(false).toBeFalsy();

import React, {Component} from 'react';
   
class ProductHeader extends Component  {
    render() {
        return(
            <h2 className="title"> Product Listing Page </h2>
        );
    }
};
export default ProductHeader;

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })