Shallow Rendering to Test React Components

There are several approaches to test React components. The first approach that I tried was render the real DOM on the virtual environment. I used TestUtils.renderIntoDocument to render component into a real DOM. For the first time, I didn’t get any problem until I used Chart.js using this React wrapper for displaying chart. I faced a new problem!

Chart.js needs a canvas to draw the chart and since the test is isolated, there isn’t any canvas yet. I must have an environment which supports writing to DOM. Then I’ve installed the required library which is Canvas. I’ve also configured it in order to provide canvas for Chart.js, but I still got another new problem :”

After reading several articles, I found new approach for testing React! It’s called shallow rendering. By using this approach you can create unit testing React components without a DOM. From this article, it said that, “It is perfect for testing in an isolation – lower-level components cannot affect your test since they are not rendered at all.” Yep, by using this approach, I don’t need to render the Chart.js component in a real DOM.

The same article also said one of the pros of shallow rendering is a great tool for unit testing since the lower-level components except the top one cannot affect the test outcome at all. Another pros that’s beneficial is, there’s no need a real DOM to test components. Every JavaScript environment could do, so I don’t have to install another new library. Then the good news is, this approach is also suggested by React development team! I hope there will be many new useful features to test React components using this API.

How to do shallow rendering?

Instead of using TestUtils.renderIntoDocument to render the component, we will instantiate the component then get result of its render method. The implementation is similar like this,

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import ProjectList from '../ProjectList';

const projectNames = ['Project 1', 'Project 2'];
const projects = [
  { name: 'Project 1', phid: '1', start_date: '2017-03-28', end_date: '2017-04-28' },
  { name: 'Project 2', phid: '2', start_date: '2017-04-28', end_date: '2017-05-28' },
];

describe('project list', () => {
  test('renders projects correctly', () => {
    const shallowRenderer = TestUtils.createRenderer();
    shallowRenderer.render(React.createElement(ProjectList, { name, projects }));
    const projectList = shallowRenderer.getRenderOutput();
  });
});

The render output will contain an object which has many properties that you can test on. For example, I wrote this code below for test the project name in every project card.

const projectCards = projectList.props.children;

expect(projectCards.map(projectCard =>
 projectCard.props.name,
)).toEqual(projectNames);

Well, this is one of the example using shallow rendering to test React components. I think this approach is quite nice since every JavaScript environment could do the testing so you don’t have to be worry to provide the virtual environment that support real DOM. But, I’ve actually read another approach to test React component using stub. Maybe in the near future, I’ll use that approach too and post the result here. Last not the least, thanks for reading this! 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s