reactjs - sinon 存根不替换反应组件中的功能

Question

我正在尝试使用 Enzyme + 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

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

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.call语法。

Answer 2

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

如果您将它作为参数传递给该组件，那就没问题了：

var stub = sinon.stub();

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

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