Почему мой метод React onChange не соответствует моей функции стрелки в ферментах содержит testAllMatchingElements

Question

Я написал тестовый пример, который пытается проверить, реагирует ли реакция на все мои элементы правильно.

код, который испытывается:

... 
eventDateChange(moment, dateType) { 
    const {handleEventChange} = this.props; 
    let {event} = this.state; 
    event[dateType] = moment.format("YYYY-MM-DD HH:mm"); 
    this.setState({event}); 
    handleEventChange(event); 
}; 

render() { 
    return (
     <div className="event-input"> 
      <DateTime 
       onChange={moment => this.eventDateChange(moment,'startDate')} 
       inputProps={{placeholder: 'From:'}} 
       dateFormat="YYYY-MM-DD"/> 
     </div> 
    ) 
} 
... 

Код испытания:

import React from "react"; 
import {expect} from "chai"; 
import {shallow} from "enzyme"; 
import EventInput from "../../../blog/event/EventInput.jsx"; 
import DateTime from "react-datetime"; 


describe('EventInput',() => { 
     it('is rendering an calendar icon',() => { 
      const wrapper = shallow(<EventInput/>); 
      expect(wrapper.containsAllMatchingElements([ 
       <DateTime 
        onChange={moment => wrapper.instance.eventDateChange(moment,'startDate')} 
        inputProps={{placeholder: 'From:'}} 
        dateFormat="YYYY-MM-DD"/> 
      ])).to.equal(true); 
     }); 
    }); 

Проблема заключается в том, что мой метод OnChange терпит неудачу испытания. Если я удалю метод onChange из кода и теста, тест будет успешным.

Как вы можете видеть, в тестах я использовал Mocha, Chai, Enzyme.

Из того, что я вижу, все реквизиты одинаковы, за исключением onChange, где я не могу использовать это в тесте и вам нужно изменить его на экземпляр.

Answer 1

Глядя на реализацию того, как фермент сравнивает узлы (https://github.com/airbnb/enzyme/blob/d34630e9c3e07ca7983d37695d5668377f94a793/src/Utils.js#L102), похоже, что фермент требует, чтобы реквизит типа «функция» точно соответствовал при выполнении этого сравнения (right[prop] === left[prop]) и вернет false, если это условие не выполняется.

Ваши лямбда-функции не идентичны, поэтому сравнение === не удастся. Всякий раз, когда вы используете лямбда, вы создаете новую анонимную функцию, поэтому, даже если параметры и тело одинаковы между двумя объявлениями лямбда, они фактически являются двумя отдельными экземплярами функций.

Чтобы обойти эту проблему, вы можете: 1) создать ссылку на точный экземпляр функции, используемый в вашем компоненте, чтобы ваш тест мог ссылаться на него, или 2) использовать здесь другой API фермента. Я бы предложил №2. Похоже, вы overtesting немного, проверяя все значения свойств, и вы могли бы использовать что-то вроде этого, вместо:

it('is rendering an calendar icon',() => { 
 
    const wrapper = shallow(<EventInput/>); 
 
    expect(wrapper.matchesElement(
 
     <div> 
 
      <DateTime /> 
 
     </div> 
 
    )).to.equal(true); 
 
});

Если вы хотите проверить отдельные опоры на DateTime, вы могли бы дополнительно сделать что-то вроде: expect(wrapper.find("DateTime").props().dateFormat).to.equal("YYYY-MM-DD").