[英]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. 我在
userToEdit_array
有不同的项目,并想检查测试是否通过这些项目中的每一项。
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 : "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);
}
});
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. 我使用酶的
setProps
方法重新渲染具有新道具的组件(文档: http : setProps
),但是异步代码似乎存在问题,因为它试图通过数组中最后一个道具的测试,并且测试没有通过。
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. 同样,如果
userToEdit_array
最后一项有效,则所有测试均通过,但是如果userToEdit_array
最后一项无效,则所有测试均将失败。
Because each tests ( it
) is asynchronous, your current way will not works. 因为每个测试(
it
)是异步的,你目前的方式将不会工作。 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. 请注意,由于您已经在使用箭头功能,因此我在这里使用了其他一些ES6功能(块作用域变量,对象初始化程序的简写形式)。 Also, consider to use mocha-testdata , it will help you a lot in case like this.
另外,考虑使用mocha-testdata ,在这种情况下,它将对您有很大帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.