При тестировании компонента React с помощью Enzyme лучше использовать имитацию или вызывать метод непосредственно в instance ()?

Question

Если у вас есть такой компонент

class Editor extends Component {
  handleChange() {
    // some code
  }

  render() {
     <div>
       <input className="Editor" onChange={this.handleChange} />
     </div>
  }
}

Лучше ли проверить изменение дескриптора, имитируя событие изменения с имитацией, например:

wrapper.simulate ('change', {//})

Или путем непосредственного вызова метода с использованием экземпляра:

wrapper.instance (). handleChange ()

Answer 1

Если вы используете Shallow Rendering , то .simulate просто пытается найти подходящую опору и назвать ее .Из раздела Common Gotchas для .simulate:

Несмотря на то, что имя подразумевает, что это имитирует реальное событие, .simulate() фактически нацеливается на опору компонента на основесобытие, которое вы даете.Например, .simulate('click') фактически получит реквизит onClick и вызовет его.

Нет никакого преимущества в вызове .simulate при использовании мелкой визуализации и простом вызове реквизита напрямую, чтобы избежать проблемвызвано тем, что событие не отображается на правильную опору.

---

Если вы используете Полный рендеринг DOM , то .simulate сработает событие , которое заканчиваетсявызов runEventsInBatch из комично названного ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events.

Так что использование .simulate с mount фактически смоделирует событие, просто обратите внимание на Раздел Common Gotchas , который:

ReactWrapper будет передавать объект SyntheticEvent в обработчик событий в вашем коде.Помните, что если код, который вы тестируете, использует свойства, которые не включены в SyntheticEvent, например, event.target.value, вам необходимо предоставить фиктивное событие ... для его работы.

Для полного рендеринга DOM вы должны определить, есть ли какое-либо значение в ReactDOM, имитирующем событие для вызова вашего обработчика или просто для непосредственного вызова вашего обработчика.

---

От этот пост от разработчика Airbnb:

В общем, я обнаружил, что лучше всего вызывать опору напрямую и избегать .simulate.

Для вашего теста это будет выглядеть примерно так:

test('onChange', () => {
  const wrapper = shallow(<Editor />);  // works with shallow or mount
  const onChangeHandler = wrapper.find('input').prop('onChange');
  // test onChangeHandler
})