sinon存根不替换反应组件中的函数

Question

我正在尝试测试点击一种反应成分，以利用酶Sinon

var stub = sinon.stub(Comp.prototype, 'save', function() {  });

let wrapper = shallow(
    <Comp/>
);

wrapper.find('.btn-header').simulate('click');
sinon.assert.called(stub);

Comp.prototype.refineOnClick.restore();

我的Comp组件有一个引发异常的保存功能

save: function () {
    throw('error');
}

当我运行测试时，我希望不会抛出任何错误，并且存根中的空函数会被触发——但事实并非如此。组件内部的实际函数被触发，而不是空的存根。

Answer 1

单元测试的原则之一是，您不应该伪造被测试单元的内部结构。它只会降低测试的可读性和可维护性。显然，方法save是Comp

如果您将其作为参数传递到该组件中，就可以了：

var stub = sinon.stub();

let wrapper = shallow(
    <Comp onSave={stub} />
);

wrapper.find('.btn-header').simulate('click');
sinon.assert.called(stub);

Answer 2

通过使用酶包装器的实例，您可以访问酶包装器上的函数（因此也可以访问存根）。因此，要测试组件的保存功能，请执行以下操作：

const wrapper = shallow(<Comp />)
sinon.stub(wrapper.instance(), 'save')
wrapper.find('.btn-header').simulate('click')
expect(wrapper.instance().save).to.have.been.called

注意，我使用sinon-chai作为.to.have.been.called语法。