Question

我需要编写一个测试来模拟人字形更改页面的点击。当onClick发生时调用的函数具有一个合成事件处理程序作为参数，我需要某种方法来模拟此事件处理程序（或使用相同的功能重写代码）。我目前收到错误

TypeError：无法读取未定义的属性'preventDefault'

编辑：所有内容都包含在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提交，或者发现页面会自动刷新，或者您想阻止默认操作事件），则只需添加一个模拟的{{ 1}}在模拟的preventDefault事件中：

click

为确保状态正确更改，请将您的handleClick方法更改为以下值之一（由于wrapper.find("Icon").at(0).simulate("click", { preventDefault: () => null });是异步的，因此利用其callback可确保比较时值准确）：

选项1-handleClick方法：

setState

选项2 – 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

  })
}

模拟onClick的SyntheticEvent处理程序

1 个答案: