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

5 comments:

  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
  2. I will certainly recommend your blog more often! You are creating amazing content
    Book your ideal accommodation

    ReplyDelete
  3. """Welcome to We Buy Houses Fort Lauderdale, the Official Cash Home Buyer of Fort Lauderdale, Florida, and surrounding areas.

    We provide home sellers with a cash option to purchase their property quickly—with NO Repairs, and NO Fees or Commissions. Simply go to our website or call us at (754) 200-2005 to get a no-obligation cash home offer sent to you. It’s free and confidential.

    Avoiding foreclosure? Facing divorce? Moving? Upside down in your mortgage? Liens? It doesn’t matter whether you live in it, you’re renting it out, it’s vacant, or not even habitable. We help owners who have inherited an unwanted property, own a vacant house, are behind on payments, owe liens, downsized, and can’t sell… even if the house needs repairs that you can’t pay for… and yes, even if the house is fire damaged or has bad rental tenants. Basically, if you have a property and need to sell it… we’d like to make you a fair cash offer and close on it when you’re ready to sell.

    Just contact us today to get started!"""

    ReplyDelete
  4. Haven't starting working but bookmarking it for sure. Thank you.
    buy logo

    ReplyDelete
  5. Eminem, also known as Marshall Mathers, is one of the most commercially successful rappers of all time, with more than 100 million albums sold worldwide. He is one of the richest rappers in the world, with an estimated net worth of $210 million. Read more in Eminem net worth.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts