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

您得到的初始错误消息是完全正确的-看the Sinon docs，.calledOnce不是一个函数，它是一个运行代码的JavaScript get。通常，Chai期望似乎仅在需要参数时才是函数。

我觉得这有点烦人，因为get重载不是很好，并且破坏了我们对代码进行推理的能力，并且引发了许多皮棉错误，但是嘿。

改变您的期望

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

修复测试（至少在我的机器上！）

在第二个示例中代码似乎“起作用”的原因是因为测试解决了calledOnce get操作，该操作检查条件并抛出测试失败断言，因此永远没有机会抛出原始代码通过尝试调用get结果（好像它是一个函数）来出错。

顺便说一句，通过酶的内置.simulate()调用来触发click事件更容易。这段代码可以正常工作：

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

Sinon存根仅记录已在之前运行的响应调用

1 个答案: