Sinon存根仅记录在以前运行过的情况下对调用作出反应

Question

这是我正在测试的代码：

const CardWarsComponent = props => {
const onSubmitCardMove = () => {
props.floopThePig()
}
return <Button id="FloopButtonId" onClick={onSubmitCardMove}>FLOOP IT</Button>
};

当我测试时，我会这样做：

const floopStub = sinon.stub();
const wrapper = shallow(<CardWarsComponent floopThePig={floopStub}></CardWarsComponent>)
const button = wrapper.find('#FloopButtonId').dive();
const onClick = button.prop('onClick');
onClick();
wrapper.update();
expect(floopStub).to.have.been.calledOnce();

我发现我得到了这样的回应：

TypeError: (0, _chai.expect)(...).to.have.been.calledOnce is not a function

但是，如果我已经叫它一次了：

const floopStub = sinon.stub();
floopStub()
const wrapper = shallow(<CardWarsComponent floopThePig={floopMock}></CardWarsComponent>)

然后我得到：

expected floopThePig to have been called exactly once, but was called twice
floopThePig at Context.floopThePig
floopThePig at floopThePig

为什么我不能叫一次，但叫了一次之后。。。我接到第二个(实际测试)电话了吗？

Answer 1

您得到的初始错误消息完全正确-查看Sinon文档，.calledOnce不是函数，而是运行代码的javascriptget。一般来说，Chai期望似乎只有在需要参数的情况下才是函数。

我觉得这有点烦人，因为get重载不是很好，破坏了我们对代码进行推理的能力，它会引发一堆lint错误，但嘿。

将您的期望更改为

expect(floopStub).to.have.been.calledOnce;

修复测试(至少在我的机器上！)

在第二个示例中，代码似乎"有效"的原因是，测试解析了calledOnceget操作，该操作检查条件并抛出测试失败断言，因此永远不会像调用函数一样调用get结果来抛出原始错误。

顺便说一句，使用酶的内置.simulate()调用更容易触发点击事件。此代码运行良好：

const floopStub = sinon.stub();
const wrapper = shallow(<CardWarsComponent floopThePig={floopMock}></CardWarsComponent>);
wrapper.find('#FloopButtonId').dive().simulate('click');
expect(floopStub).to.have.been.calledOnce;

关于用sinon/酶测试React事件的更多信息，请点击此处：https://www.leighhalliday.com/testing-react-jest-enzyme-sinon