CODEWITHSUNDEEP
javascriptreactjssinonenzyme
alexfrize
alexfrize

Reputation: 1102

How to test a React component with different props with Enzyme

I'm trying to test react component with expect + enzyme + sinon. I have different items in userToEdit_array and want to check if tests pass with each of these items.

Here is my code:

import React from 'react';
import { shallow, mount } from 'enzyme';
import expect from 'expect';
import sinon from 'sinon';
import { UserProfileProfile } from '../UserProfile/UserProfileProfile.component.jsx';

describe('Testing new user addition form in <UserProfileProfile> component', () => {
  var userToEdit_array = [
    {
      profile : {
        name : "Long Lohn",
        email : "[email protected]",
        phone : "+1-000-545-11-22",
        description : ""
      }
    },
    {
      profile : {
        name : "Long Lohnson",
        email : "[email protected]",
        phone : "8900555-45-11",
        description : ""
      }
    },
    {
      profile : {
        name : "Giiggi Aarroron",
        email : "[email protected] 234 234 ",
        phone : "8-900555-45-11-234234234234",
        description : ""
      }
    }          
  ];
  var spy = sinon.spy();
  var props =  {
    userToEdit : userToEdit_array[0],
    users: [],
    action_createNewUserDB : () => spy()
  }

  var wrapper = mount(<UserProfileProfile {...props} />);

  it('should check if SAVE button exist', () => {
    expect(wrapper.find("button.UserProfile__profile__form__button").length).toEqual(1);
  });

  var btn = wrapper.find("button.UserProfile__profile__form__button");

  function checkNow() {
    it('ckecks if action_createNewUserDB is called with different parameters ()', () => {
      btn.simulate('click');
      expect(spy.called).toEqual(true);
    });  
  }

  checkNow();

  for (let i=1; i < userToEdit_array.length; i++) {
      console.log("now testing:",userToEdit_array[i]);
      wrapper.setProps({ userToEdit : userToEdit_array[i] }, checkNow);  
  }

});

I use enzyme's setProps method to re-render my component with new props (doc: http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html), but it seems that there is an issue with asyncronous code, because it's trying to pass tests with last props in array, and tests are not passing.

If I delete/comment last block:

  for (let i=1; i < userToEdit_array.length; i++) {
      console.log("now testing:",userToEdit_array[i]);
      wrapper.setProps({ userToEdit : userToEdit_array[i] }, checkNow);  
  }

the test passes.

Also, if last item in userToEdit_array is valid, all tests pass, but if last item in userToEdit_array is not valid, all tests fail.

Upvotes: 1

Views: 2020

Answers (1)

Tr1et
Tr1et

Reputation: 895

Because each tests (it) is asynchronous, your current way will not works. When the tests starts, the last item in the arrays is already set into the props. Normally, you should mount the component in each tests to make them independent like this:

const checkNow = (userToEdit) => {
  it('checks if action_createNewUserDB is called with different parameters ()', () => {
    const spy = sinon.spy();
    const props =  {
      userToEdit,
      users: [],
      action_createNewUserDB : spy
    }

    const wrapper = mount(<UserProfileProfile {...props} />);
    const btn = wrapper.find("button.UserProfile__profile__form__button");        
    btn.simulate('click');

    expect(spy.called).toEqual(true);
  });  
}

for (let i=1; i < userToEdit_array.length; i++) {
  console.log("now testing:",userToEdit_array[i]);
  checkNow(userToEdit_array[i]);  
}

Note that I have used some additional ES6 features here (block scoped variable, object initializer shorthand), as you're already using arrow function. Also, consider to use mocha-testdata, it will help you a lot in case like this.

Upvotes: 3

Related Questions