模拟酶中的onClick事件

Question

I have this code in my Search component render method:

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

and then I have this:

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

this definitely gets called when I click the button. however, my test is not simulating it even though I feel like I am doing it the correct way.

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

however, for some reason it does not think that my function has been called even though surely that is the way to simulate it? (there is only one button on the page)

Answer 1

The problem here is enzyme considers handle search method as a constant. Try something like this. it should work

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

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