연결된 구성 요소 작업을 테스트하는 방법

Question

가짜 저장소를 사용하여 연결된 구성 요소를 쉽게 테스트하여 올바른 소품이 내 프레젠테이션 구성 요소로 전달되도록 할 수 있습니다. 그러나 올바른 동작이 통과되고 있는지 테스트 할 수 없습니다. 여기

내 간단한 연결 구성 요소입니다

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

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

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

그리고 여기 테스트입니다 : 구성 요소는 다음과

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

로 createCustomer를 프로비저닝

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 그 자체 일 때 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;⋅ 
    }); 
});