Question

我试图用expect +酶+ sinon测试反应成分。我在userToEdit_array中有不同的项目，并希望检查测试是否通过了每个项目。

这是我的代码：

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 : "some@email.com",
        phone : "+1-000-545-11-22",
        description : ""
      }
    },
    {
      profile : {
        name : "Long Lohnson",
        email : "another@email.com",
        phone : "8900555-45-11",
        description : ""
      }
    },
    {
      profile : {
        name : "Giiggi Aarroron",
        email : "another@email.comwqeqewqe2 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);  
  }

});

我使用酶的setProps方法用新道具重新渲染我的组件（doc：http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html），但似乎异步代码存在问题，因为它＆＃ 39;试图用数组中的最后道具传递测试，测试没有通过。

如果我删除/评论最后一个块：

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

测试通过。

此外，如果userToEdit_array中的最后一项有效，则所有测试都会通过，但如果userToEdit_array中的最后一项无效，则所有测试都会失败。

Answer 1

因为每个测试（it）都是异步的，所以当前的方式不起作用。测试开始时，数组中的最后一项已经设置为道具。通常，您应该在每个测试中安装组件，使其独立，如下所示：

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]);  
}

请注意，我已经在这里使用了一些额外的ES6功能（块范围变量，对象初始化程序简写），因为您已经在使用箭头功能。另外，考虑使用http://www.cnn.com，在这种情况下它会对你有所帮助。

如何使用Enzyme测试具有不同道具的React组件

1 个答案: