Блог

Можно использовать метод Enzyme .simulate() для пользовательских событий. Например:

 // Code
<Element onFoo={someFunction}></Elements>

// Test
const element = shallow(<Element>);
element.simulate('foo');
  

Следует ли таким образом тестировать пользовательские события с помощью Enzyme или это лучший подход к использованию s.th . как:

 //Test
const element = shallow(<Element>);
element.props.onFoo()
  

Похоже, что .simulate() для пользовательских событий это не реализовано. Существует проблема на github, где обсуждается эта тема, и один из сопровождающих Enzyme предлагает использовать второй подход, который вы предоставили:

 wrapper.find(Child).prop('customEvent')(fakeEvent)
  

Вы можете использовать .simulate() для пользовательских событий. Есть уловка, которую вы должны использовать on в качестве префикса для пользовательского события. Например onJump , onAdd так вы должны называть свои пользовательские события.

element.props.onFoo() в приведенном выше случае на самом деле не тестируется функциональность. Он проверяет только внутренние компоненты компонента, поэтому привязка остается непроверенной. Также становится сложно провести рефакторинг, поскольку реализация связана с тестовым кодом.

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

В дополнение к другим ответам, если вы тестируете родительский компонент, который использует ваш Element компонент:

Не уверен, что это также зависит от версии. Но я работаю с enzyme 2.9.1, и именно так я добиваюсь запуска дочерней пользовательской функции:

wrapper.find(Child).prop('customEvent')(/*args*/)

Но разве это на самом деле уже не работает в текущем мелком рендеринге?

 /* Film component */
render() {
  return (
    ...
    <FilmHeader onSearchClick={this.handleSearchClick}>
    ...
  )
}

/* Test */
const wrapper = shallow(<Film {...props} />);
wrapper.find('FilmHeader').simulate('searchClick');
  

Вышеупомянутая проблема с ферментом все еще открыта. И в документации не указано ничего очевидного об этой функции. Так что, возможно, проблема в самой документации.

Что сработало для меня, пытаясь создать пользовательское событие для компонента, который не является компонентом верхнего уровня, было следующим:

 const myComponent = enzymeWrapper.find('MyComponent');
myComponent.node.onThingSelected({}, { thing: newThing});
  

Где MyComponent — это компонент React, onThingSelected — это пользовательский обработчик событий, точно названный в компоненте, а newThing — это объект типа, ожидаемого обработчиком событий.