为什么我的按钮在我的测试中未定义？

Question

我的测试：

  describe('button component', () => {
    it('should toggle off when clicked', () => {
      let component;
      component = ReactTestUtils.renderIntoDocument(<Search />);
      let searchbtn = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'button');
      ReactTestUtils.Simulate.click(searchbtn);
      console.log(searchbtn, 'search button***'); //UNDEFINED
      expect(searchbtn.calledOnce).to.equal(false);
    })
  });

这是我的搜索组件：

  render() {
    return (
      <div className="search">
        <button className="searchButton" onClick={this.handleSearch}>{this.state.on ? 'ON' : 'OFF'}</button>
      </div>
    );
  }

我需要监视它还是嘲笑它？还是有更好的方法来测试反应中的按钮？

Answer 1

既然你已经添加了 enzyme 标签，我将使用 enzyme 来回答。

可以很容易地通过浅层渲染进行测试-

const searchWrapper = shallow(<Search />);
const button = searchWrapper.find('button').first();

当您模拟按钮上的点击事件时，将调用通过 onClick 道具提供的 onClick 处理程序，在您的情况下是 handleSearch。

因此，如果您根据 onClick 函数调用相应的 ui 设置某些状态，则可以比较或检查更改是否正确反映在 dom.

或

如果您只是想通过使用类似名称的假方法来检查方法是否被调用 -

const onButtonClick = sinon.spy();
expect(onButtonClick.calledOnce).to.equal(false);
button.setProps({ onClick:onButtonClick});
button.simulate('click');
expect(onButtonClick.calledOnce).to.equal(true);

为什么我的按钮在我的测试中未定义？

Why is my button undefined in my test?

testing

mocha.js

chai

reactjs

enzyme