Redux 단위 테스트에서 상점을 업데이트하는 방법은 무엇입니까?

Question

효소를 사용하여 모카가 기대하고 주장합니다.

내 단위 테스트의 목적은 일시 중지되었을 때 올바른 인수로 디스패치가 호출되고 mergeProps에서 일시 중지되지 않았는지 확인하는 것입니다. 동적으로 내 저장소의 상태를 변경해야합니다 : paused: true.

나는 일시 중지 된 값을 디스 패칭하여 업데이트하려고하지만 모의이며 실제로 감속기를 통과하지 않기 때문에 올바른 것으로 생각하지 않습니다.

패키지 redux-mock-store을 사용하고 있습니다.

어떻게하면됩니까?

describe('Play Container',() => { 
    const id = 'audio-player-1'; 

    const store = configureMockStore()({ 
    players: { 
     'audio-player-1': { paused: false } 
    } 
    }); 
    let dispatchSpy; 
    let wrapper; 

    beforeEach(() => { 
    dispatchSpy = expect.spyOn(store, 'dispatch'); 
    wrapper = shallow(
     <PlayContainer className={attributes.className}> 
     {children} 
     </PlayContainer>, 
     { context: { id } }, 
    ).shallow({ context: { store } }); 
    }); 

    it('onClick toggles play if paused',() => { 
    //Not Working 
    store.dispatch(updateOption('paused', true, id)); 
    wrapper.simulate('click'); 
    expect(dispatchSpy).toHaveBeenCalledWith(play(id)); 
    }); 

    it('onClick toggles pause if playing',() => { 
    wrapper.simulate('click'); 
    expect(dispatchSpy).toHaveBeenCalledWith(pause(id)); 
    }); 
}); 

용기 :

const mapStateToProps = ({ players }, { id }) => ({ 
    paused: players[id].paused 
}); 

const mergeProps = (stateProps, { dispatch }, { id }) => ({ 
    onClick:() => (stateProps.paused ? dispatch(play(id)) : dispatch(pause(id))) 
}); 

export default connectWithId(mapStateToProps, null, mergeProps)(Play); 

connectWithId :

//getContext() is from recompose library and just injects id into props 
export const connectWithId = (...args) => compose(
    getContext({ id: React.PropTypes.string }), 
    connect(...args), 
); 

행동 :

updateOption: (key, value, id) => ({ 
    type: actionTypes.player.UPDATE_OPTION, 
    key, 
    value, 
    id, 
}), 

Answer 1

configureMockStore이 공장은, 그는 미들웨어를 적용하여 모의 저장소를 구성하는 데 사용됩니다 . mockStore 개체를 반환합니다.
mockStore 구성된 모의 상점의 인스턴스를 반환합니다. 그것은 행동을 통해 국가를 변화시키지 않습니다. 그것은 단지 행동이 통과 된 기록입니다. 그 이유는 "통합"(상태 + 구성 요소) 테스트가 아닌 단위 테스트를 만드는 유틸리티 도구이기 때문입니다.

그럼에도 불구하고 상태 변경을 시뮬레이션 할 수 있습니다. 당신의 테스트에서 다음

import configureMockStore from 'redux-mock-store'; 

const middlewares = []; 
const mockStore = configureMockStore(middlewares); 

let state = { 
    players: { 
    'audio-player-1': { paused: false } 
    } 
}; 

const store = mockStore(() => state); 

당신이 할 수 있습니다 : 당신이 다음을 수행 할 수 있도록 mockStore는 기능을 허용

state = NEW_STATE; 

// now you need to make the components update the state. 
// so you can dispatch any action so the mock store will notify the subscribers 
store.dispatch({ type: 'ANY_ACTION' }); 

Answer 2

지금 것 같다 당신이 당신의 진짜 감속기를 제공 할 수있는 pr by @catarinasoliveira 덕분에 이에 따라 상점이 업데이트됩니다. 그것은 마스터에 있지만 그것은 npm에 아직 있는지, 아니면 솔직히 말해서 내가 방금 말한 것이지만, 나는 그것을 시험해보고 있습니다.