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

Answer 2

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

如果你把它作为参数传递给那个组件就可以了：

var stub = sinon.stub();

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

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

sinon stub不替换反应组件中的功能

2 个答案: