Как да тествате React компонент с различни подпори с Enzyme

Опитвам се да тествам реагиращ компонент с очакване + ензим + синон. Имам различни елементи в 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 : "[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);  
  }

});

Използвам метода setProps на enzyme, за да рендерирам отново моя компонент с нови пропси (doc: http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html), но изглежда, че има проблем с асинхронен код, тъй като той се опитва да премине тестове с последните подпори в масива и тестове не преминават.

Ако изтрия/коментирам последния блок:

  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 не е валиден, всички тестове се провалят.


reactjs javascript enzyme sinon
person alexfrize    schedule 30.08.2017    source източник

Отговори (1)


arrow_upward
2
arrow_downward

Тъй като всеки тест (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, това ще ви помогне много в случай като това.

person Tr1et    schedule 30.08.2017