用 Sinon 模拟一个函数答案

【问题标题】：Mocking a function with Sinon用 Sinon 模拟一个函数
【发布时间】：2017-07-23 20:07:57
【问题描述】：

我似乎无法找到一种方法来做一件非常简单的事情，如下所示：

  render() {
    return (
      <div className="messageDetail">
        <div className="messageForm" >
          Name: <input id="senderMsgName" value={this.props.nameValue} onChange={this.props.handleNameChange}/>
          <br />
          Body: <input id="senderMsgBody" value={this.props.bodyValue} onChange={this.props.handleBodyChange}/>
          <br />
        </div>
      </div>
    );
  }
}

我想测试的只是调用了 onChange 函数。我如何使用 sinon 来模拟它（记住它调用了道具）？然后我会模拟它被调用来测试它。

我从这个开始：const handleBodyChangeSpy = sinon.spy(); 并且会期待这个：expect(handleBodyChangeSpy).to.have.not.been.called();

只需要一些关于如何做到这一点的指导

【问题讨论】：

你能发布你的测试吗？

标签： unit-testing reactjs mocking sinon spy

【解决方案1】：

我假设您使用的是 ES6 和 class Component extends React.Component。在这种情况下，您可以通过写var spy = sinon.spy(Component.prototype, "handleBodyChange") 创建一个间谍。您可以在该间谍上测试您的断言。

更多关于在此处创建间谍的信息：http://sinonjs.org/releases/v1.17.7/spies/（请查看创建间谍：sinon.spy() 方法签名）。

【讨论】：