Как протестировать компонент 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 для повторного рендеринга моего компонента с новыми реквизитами (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) является асинхронным, ваш текущий способ работать не будет. Когда тесты запускаются, последний элемент в массивах уже установлен в props. Обычно вы должны монтировать компонент в каждом тесте, чтобы сделать их независимыми, например:

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