如何用酶測試不同道具的React組件

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）組件，但似乎有一個與asyncronous代碼的問題，因爲它是試圖通過陣列中最後一個道具的測試，並且測試沒有通過。

如果我刪除/評論最後一塊：

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這裏擁有（塊範圍的變量，對象初始化的簡寫），因爲你已經在使用箭頭功能。另外，考慮使用mocha-testdata，這樣可以幫助你很多。