Reactjs React.js单元测试点击事件与酶和Sinon

我正在尝试将间谍附加到我的react组件上的单击事件。我正在将

酶与摩卡咖啡

和

柴

一起使用，但我在通过以下测试时遇到困难：

it('Handles a Click Event', () => {
    let rootId = Bigtree['rootId'];
    const spy = sinon.spy();


    const render = shallow(<EnvH tree={smalltree.objects} 
    node={smalltree.objects[rootId]} root={rootId}/>);


    render.find('.toggler').simulate('click');

    expect(spy.called).to.be.true;
});

---

提前感谢您在这方面的帮助。我还应该提到的是，该测试并没有通过，表明它预期为真，但发现为假

您的测试未通过，因为

spy

函数未赋予

span.toggler

元素，因此它从未调用过该函数。 要使测试通过，您应该改为编写

sinon.spy（EnvH.prototype，“toggleCollapseState”）

然后

---

expect（EnvH.prototype.toggleCollapseState.calledOnce）.to.be.true

如果您需要其他信息，请告诉我。谢谢。哇，谢谢你的回复。我一直很忙，没有机会再检查一下。今天晚些时候我会尝试这个方法，如果有效，我会将其标记为正确。

class EnvH extends React.Component {
return (
  <div className='top' key={Math.random()}>
    <div className={'tableRow row'} id={node.id} style={rowStyle} key={Math.random()}>
      <div style={nodeStyle} className={'root EnvHColumn ' + classNames(classObject)} key={Math.random()}>
        //Here is the actual Click Item in question
        <span className={'toggler'} onClick={this.toggleCollapseState.bind(this)}>{node.type} - {node.name}</span>
      </div>
      <ColumnContent columnType={'description'} nodeInfo={node.description} />
      <ColumnContent columnType={'createdOn'} nodeInfo={node.createdAt} />
      <ColumnContent columnType={'updatedOn'} nodeInfo={node.updatedAt} />
    </div>
    <div className={'Children'} style={childrenStyle} key={Math.random()}>
      {childNodes}
    </div>
  </div>
);

  toggleCollapseState() {
     this.setState({collapsed: !this.state.collapsed});
  };