Mocking SyntheticEvent обработчик для onClick

Question

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

TypeError: Невозможно прочитать свойство 'protectDefault' с неопределенным значением

Редактировать: все содержится в setTimeout, поскольку кнопки не будут отображаться до тех пор, пока не будет выполнено несколько обещаний

Вот код функции

handleClick(e) {
  e.preventDefault();
  if (this.state.currentPage > 0) {
    this.setState({
      currentPage: this.state.currentPage - 1
    });
  }
};

Вот код внутри функции визуализации

<Icon
  link
  href="#"
  onClick={this.handleClick}
 >
   chevron_left
 </Icon>

И, наконец, мой тестовый код на данный момент

 test("Chevron left", done=>{
  Enzyme.configure({ adapter: new Adapter() });
  const wrapper = shallow(
      <App/>
  );
  expect(wrapper.exists()).toBe(true);

  setTimeout(()=>{
      wrapper.instance().state.currentPage = 1;
      wrapper.find("Icon").at(0).simulate("click");
      expect(wrapper.instance().state.currentPage).toEqual(0);
      done();
  },0)
});

Answer 1

Я почти уверен, что вам не нужен e.preventDefault() в методе handleClick (в данном случае).Вы можете удалить его и все будет в порядке.

Однако, если вы столкнетесь с этой проблемой, где она требуется (например, form представления или когда вы обнаружите, что страница автоматически обновляется или вы хотите предотвратить событие действия по умолчанию)), а затем просто добавьте фиктивное preventDefault в смоделированное событие click:

wrapper.find("Icon").at(0).simulate("click", { preventDefault: () => null });

Чтобы обеспечить правильные изменения состояния, измените метод handleClick на один из приведенных ниже (поскольку setState является асинхронным,использование его обратного вызова обеспечивает точность значений при сравнении):

Опция 1 - метод handleClick:

handleClick() {
  this.setState(prevState => {
     const nextPage =  prevState.currentPage - 1; // subtract 1 from current page

     return nextPage > 0 // if next page is greater than 0
       ? { currentPage: nextPage } // subtract 1
       : { null } // else do nothing

  })
}

Опция 2 - метод handleClick:

handleClick() {
  this.setState(prevState => ({
     currentPage: prevState.currentPage > 0 ? prevState.currentPage - 1 : 0 // if current page is greater than 0, subtract 1, else set it 0
  }))
}