Initially I thought Enzyme is the better alternative for React test utils, But I am wrong. While testing react application with enzyme, I got so many issues.

Issues I faced

  1. Enzyme not able to wrapper which renders the out of that wrapper (Ex. React modal dialog and popover ). Discussion link -
  2. Testing redux apps with Enzyme giving me many errors. Rending Redux component with multiple children redux components is not working as expected. Redux team also getting these issues. Discussion link -
  3. Javascript functions like new Blob() is failing in Enzyme
Finally I back to React test utils. 


I have done setup with webpack and karma. You can find project repository on Github.  Clone it and test it. 
git clone
npm install
npm test

Writing First Unit Test Case

Import TestUtils from react-addons-test-utils
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
import Root from '../root';

describe('root', function () {
  it('renders without problems', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);

Render Component

There are 2 types of rendering 
  1. Rendering into document. This requires DOM
  2. Shallow rendering. This doesn't require DOM  


Pass React component to renderIntoDocument function 
var root = TestUtils.renderIntoDocument(<Root/>);

Shallow Render

This type of rendering will render one level deep
var shallowRenderer = TestUtils.createRenderer();


Find below tutorials with examples
  1. Find Element By Component, Class, Tag, Id - Click here
  2. Check Class Name, Properties and State - Click here
  3. Check Component or Element Type - Click here
  4. Simulate events - Click, Change, Mouse Over etc - Click here
  5. Verify Function Calls - Click here
  6. Redux apps test cases - Click here



Follow this blog by Email

Popular Posts