Question

我可以使用虚假商店轻松测试我连接的组件，以确保将正确的道具传递给我的演示组件。但是，我无法测试是否正在通过正确的操作。

这是我的简单连接组件：

import {createCustomer} from './customerActions';
// other imports 

function mapStateToProps(state) {
    return {
        title: 'New Customer',
    };
}

export default connect(
    mapStateToProps,
    {save: createCustomer}
)(CustomerForm);

这是测试：

import * as customerActions from './customerActions';
// other imports 

describe('Container:NewCustomerContainer', function () {
    let sandbox, createCustomerStub;

    beforeEach(function () {
        sandbox = sinon.sandbox.create();
        createCustomerStub = sandbox.spy(customerActions, 'createCustomer'); // attempt to spy on the action that should be passed as a prop
    });

    afterEach(function () {
        sandbox.restore();
    });

    function setup() {
        const store = storeFake();
        return mount(
            <Provider store={store}>
                <NewCustomerContainer>
                    <div>foo</div>
                </NewCustomerContainer>
            </Provider>
        );
    }

    // this works fine
    it('should pass the correct props', function () {
        const wrapper = setup();
        const component = wrapper.find(CustomerForm);
        expect(component.prop('title')).to.equal('New Customer');
    });

    // this fails
    it('should pass createCustomer as the save prop', function() {
        const wrapper = setup();
        const component = wrapper.find(CustomerForm);
        // call the prop action to see if the correct method was called
        component.prop('save')({});
        // error, stub method wasn't called. The REAL createCustomer is called instead
        expect(createCustomerStub.called).to.be.true; 
    });
});

Answer 1

该组件已配置createCustomer，如下所示

import {createCustomer} from './customerActions';
export default connect(
    mapStateToProps,
    {save: createCustomer}
)(CustomerForm);

，在调用createCustomer时调用save本身，而不是间谍。当时没有调用评估customerActions.createCustomer。创建的间谍会监视该函数，但永远不会被咨询。

下面的测试集将组件定义为间谍，而不是原始的createCustomer函数。两个测试用例都通过了。

const App = () => <div>App</div>;
const mapStateToProps = () => { return { title: 'New Customer' }; };
const customerActions = {
  createCustomer() { return { type: 'CREATE_CUSTOMER' }; }
};

describe('Container:NewCustomerContainer', function() {
  let sandbox, createCustomerStub, component;

  beforeEach(function() {
    sandbox = sinon.sandbox.create();
    createCustomerStub = sandbox.spy(customerActions, 'createCustomer');

    const ConnectedApp = connect(
      mapStateToProps,
      {save: customerActions.createCustomer}
    )(App);

    const wrapper = mount(
      <Provider store={createStore(() => {})}>
        <ConnectedApp />
      </Provider>
    );
    component = wrapper.find(App);
  });

  afterEach(function() {
    sandbox.restore();
  });

  it('should pass the correct props', function() {
    expect(component.prop('title')).to.equal('New Customer');
  });

  it('should pass createCustomer as the save prop', function() {
    component.prop('save')();
    expect(createCustomerStub.called).to.be.true;⋅
  });
});

如何测试连接的组件操作

1 个答案: