Question

我试图将间谍附加到我的react组件上的click事件中。我正在使用Chai和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; });，但我无法通过以下测试：

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});
  };

以下是单击范围时调用的函数：

{{1}}

提前感谢您对此问题的任何帮助。我还应该提一下，测试并没有通过说它预期是真的，但发现是假的。

Answer 1

您的测试未通过，因为spy元素未赋予span.toggler函数，因此它从未被调用过。要使测试通过，您应该改为编写

sinon.spy(EnvH.prototype, 'toggleCollapseState')

然后

expect(EnvH.prototype.toggleCollapseState.calledOnce).to.be.true

使用Enzyme和Sinon进行React.js单元测试点击事件

1 个答案: