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 - https://github.com/airbnb/enzyme/issues/252
  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 - https://github.com/reactjs/redux/issues/1481
  3. Javascript functions like new Blob() is failing in Enzyme
Finally I back to React test utils. 

Setup

I have done setup with webpack and karma. You can find project repository on Github.  Clone it and test it. 
git clone https://github.com/SodhanaLibrary/react-test-utils-examples.git
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/>);
    expect(root).toExist();
  });
});

Render Component

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

renderIntoDocument

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

Shallow Render

This type of rendering will render one level deep
var shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<Root/>);
expect(shallowRenderer.getRenderOutput()).toExist();

Tutorials

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

1 comment:

  1. I love to use in my work as managing and analyzing a huge number of data can be a hard task. And if it is hard for you, then just imagine how hard it will be for you readers? Therefore I use https://thrivingwriter.com/ to help me to present (and sometimes collect) the data I need in a readable and easy way.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts