The most important way to learn how to test React components in the right way is by writing some code, and that is what we are going to do in this section.

The React documentation says that at Facebook they use Jest to test their components. However, React does not force you to use a particular test framework, and you can use your favorite one without any problems.

To see Jest in action, we are going to create a project from scratch, installing all the dependencies and writing a component with some tests. It'll be fun!

The first thing to do is to move into a new folder and run the following:

  npm init

Once package.json is created, we can start installing the dependencies, with the first one being the jest package itself:

  npm install --save-dev jest

To tell npm that we want to use the jest command to run the tests, we have to add the following scripts to package.json:

  "scripts": { 
    "build": "webpack",
    "start": "node ./dist/server",
    "test": "jest",
    "test:coverage": "jest --coverage"
  }

To write components and tests using ES2015 and JSX, we have to install all Babel-related packages so that Jest can use them to transpile and understand the code.

The second set of dependencies is:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-jest

As you may know, we now have to create a .babelrc file, which is used by Babel to know the presets and the plugins that we would like to use inside the project.

The .babelrc file looks like the following:

  { 
    "presets": ["@babel/preset-env", "@babel/preset-react"] 
  }

Now, it is time to install React and ReactDOM, which we need to create and render components:

  npm install --save react react-dom

The setup is ready, and we can run Jest against ES6 code and render our components into the DOM, but there is one more thing to do.

We need to install enzyme and enzyme-adapter-react-16.3:

  npm install enzyme enzyme-adapter-react-16.3

After you have installed these packages, you have to add a jest configuration to package.json:

  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/jest/setupTestFramework.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ]
  }

Then, let's create the jest/setupTestFramework.js file:

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

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

Now, let's imagine we have a Hello component:

  import React from 'react';

  const Hello = props => (
    <h1 className="Hello">Hello {props.name || 'World'}</h1>
  );

  export default Hello;

In order to test this component, we need to create a file with the same name but adding the .test (or .spec) suffix in the file. This will be our test file:

  // Dependencies
  import React from 'react';
  import { shallow } from 'enzyme';

  // Component to test...
  import Hello from './index';

  describe('Hello', () => {
    const wrapper = shallow(<Hello />);
    const wrapperWithProps = shallow(<Hello name="Carlos" />);

    it('should render Home component', () => {
      expect(wrapper.length).toBe(1);
    });

    it('should render by default Hello World', () => {
      expect(wrapper.text()).toBe('Hello World');
    });

    it('should render the name prop', () => {
      expect(wrapperWithProps.text()).toBe('Hello Carlos');
    });

    it('should has .Home class', () => {
      expect(wrapper.find('h1').hasClass('Hello')).toBe(true);
    });
  });

Then, in order to run the test, you need to execute the following command:

  npm test

You should see this result:

The PASS label means that all tests have been passed successfully; if you failed at least on one test, you would see the FAIL label. Let's change one of our tests to make it fail:

  it('should render Home component', () => {
    expect(wrapper.length).toBe(0);
  });

This is the result:

As you can see, the FAIL label is specified with an X. Also, the expected and received values provide useful information, and you can see which value is expected and which value is being received.

If you want to see the coverage percentage of all your unit tests, you can execute the following command:

  npm run test:coverage

The result is the following:

The coverage also generates an HTML version of the result; it creates a directory called coverage and inside another called Icov-report. If you open the index.html file in your browser, you will see the HTML version like this: