Question

如果您有mapDispatchToProps，并且想要检查是否在某个组件实例方法中调用了这些方法。所以：

const mapDispatchToProps = (dispatch) => {
  return {
    fetchPaymentDetails: () => dispatch(fetchPaymentDetails()),
    updatePaymentDetails: (payload) => dispatch(updatePaymentDetails(payload)),
    clearServerErrors: () => dispatch(clearServerErrors())
  }
}

然后在组件内的方法中：

 submit(e) {
    this.props.clearServerErrors();
 }

因此我们可以触发submit函数，但后来我们想知道确实调用了this.props.clearServerErrors。

到目前为止，我已经尝试了很多方法来测试这个涉及sinon spys和stubs但我无法验证props方法实际上是否被调用。

在我看来，当安装被mapDispatchToProps

覆盖时，我传入的方法是间谍

有关如何检查mapDispatchToProps内的prop方法的任何建议被调用吗？

Answer 1

你真的要求测试两件不同的东西：

mapToProps会怀疑你的行动助手
当事件被触发时，您的事件处理程序将作为道具传递

我没有看到为这些简单函数做＃1的价值，无论如何，为了单独测试mapToProps，你需要能够将其定义中使用的函数注入能够测试他们被称为。这样做需要查看更多代码。

或者，假设动作创建者函数来自另一个模块，您可以使用link seam来拦截对动作创建者模块的调用，并将返回值替换为您自己的模块。

使用proxyquire您的测试可能如下所示：

const sinon = require('sinon');
let fakeActions;
let MyComponent, mapToProps;

function setupFakeActions() {
    fakeActions = { 
        fetchPaymentDetails: sinon.stub(), 
        /* etc ... */
    };

    const module = proxyquire('../src/my-component', {
        './actions': fakeActions
    });
    {MyComponent, mapToProps} = module;
}

describe('MyComponent propmapping', ()=> {
    setupFakeActions();
    it('should create a function that dispatches actions', () => {
        const dispatchStub = sinon.stub();
        const result = mapToProps(dispatchStub);
        result.fetchPaymentDetails();

        assert(dispatchStub.calledOnce);
        assert(fakeActions.fetchPaymentDetails.calledOnce);
        // more assertions: http://sinonjs.org/releases/v2.3.4/assertions/
        assert(dispatchStub.calledWith(fakeActions.fetchPaymentDetails));
    });
});

你还没有用redux标记你的问题，但假设你使用它，还有另一种方法可以测试这些函数是否应该做什么，这当然只是创建一个商店，触发动作，然后看看如果正确的结果来自商店，但在意图和实施方面相当模糊，因此不推荐。

现在，第二点更有价值，并且使用Enzyme非常直接：

/* assuming existing test setup code for Mocha is in place: describe, it, ... */
it('calls assigned props on click events', () => {
    const props = {};
    props.fetchPaymentDetails = sinon.spy();
    const wrapper = shallow(
        <MyComponent fetchPaymentDetails={fetchPaymentDetails} />
    );
    wrapper.find('button').simulate('click');
    expect(props.fetchPaymentDetails).to.have.property('callCount', 1);
});

诗乃＆amp; React - 检查是否调用了mapToDispatch方法

1 个答案: