Javascript 在酶中模拟onClick事件

我的

搜索
组件渲染方法中有以下代码：

   <button className="searchButton" onClick={this.handleSearch}>{this.state.on ? 'Search' : null}</button>

当我点击按钮时，它肯定会被调用。然而，我的测试并不是在模拟它，尽管我觉得我的测试方法是正确的

it.only('calls handleSearch', () => {
  searchButton = renderedOutput.find('button').at(0);
  searchButton.simulate('click');
  expect(handleSearchStub).to.have.been.called;
});

然而，出于某种原因，它不认为调用了我的函数，即使这确实是模拟它的方式？（页面上只有一个按钮）
这里的问题是将句柄搜索方法视为常量。
试试这样的。应该行得通

handleSearch(e){
    this.setState(prevState => ({
      on: !prevState.on
    }));
  }

 <button className="searchButton" onClick={(e) => this.handleSearch(e)}>{this.state.on ? 'Search' : null}</button>

handleSearch（e）{
this.setState（prevState=>({
on:！prevState.on
}));
}
this.handleSearch（e）}>{this.state.on？'Search'：null}
just
.click（）
就像在普通dom中一样？@MaciejKozieja您指的是哪里？最好看看您是如何在测试中将存根传递给组件的，因为onClick处理程序是一个方法而不是传入函数prop，并且
handleSearch
方法也不会调用任何传入函数prop。我只能假设你在监视
handleSearch
方法本身？@alechill我所做的唯一一件事是：`handleSearchStub=sinon.stub（）；`将其设置为sinon存根，然后需要将其传递到组件中。我认为存根无论如何都是错误的方法，因为您的方法不调用任何需要作为存根传入的外部对象。测试内部方法调用与实现细节联系太紧密。而是测试最终结果。。。我会模拟点击，然后断言状态实际上已经通过
expect（renderOutput.state（）.on）.to.be.true
或此状态的最终结果（即按钮中有文本
expect（renderOutput.find（'button'）.at（0.text（））.to.be.equal（'Search'））更改了。这将具有相同的行为，除了onClick处理程序现在是一个匿名函数外，它每次都会导致按钮组件重新呈现，即使没有其他更改。在这个组件中，由于它只是一个小按钮，因此可能不会对性能产生实际影响，但如果在树的更高层执行此操作，则可能会削弱性能。是的，这是真的。所以我通常在构造函数中绑定一次函数并调用它。这种方法可以解决问题。是的，好的计划，OP的方法也可以代替构造函数中的绑定，因为他们在定义方法时使用了箭头函数，所以已经绑定到词法
this
，作用域是类
handleSearch(e){
    this.setState(prevState => ({
      on: !prevState.on
    }));
  }

 <button className="searchButton" onClick={(e) => this.handleSearch(e)}>{this.state.on ? 'Search' : null}</button>