VueJ에서 Vuex 액션이 디스패치되었는지 유닛 테스트하는 방법s

VueJ에서 Vuex 액션이 디스패치되었는지 유닛 테스트하는 방법s

나는 단지 테스트하고 싶다.myAwesome액션이 송신되는 것은,App.vue컴포넌트는created()이게 테스트하는 건가요?이 테스트에 재스민을 쓰고 있어요어떤 도움이라도 주면 최고야!

App.js

describe('when app is created()', () => {
  it('should dispatch myAwesomeAction', (done) => {

    const actions = {
      myAwesomeAction() {
        console.log('myAwesomeAction')
        // commit()
      }
    }

    const state = {
      myAwesomeAction: false
    }

    const mutations = {
      LOAD_SUCCESS(state) {
        state.myAwesomeAction = true
      }
    }

    const options = {
      state,
      mutations,
      actions
    }

    const mockStore = new Vuex.Store(options)

    spyOn(mockStore, 'dispatch')

    const vm = new Vue({
      template: '<div><component></component></div>',
      store: mockStore,
      components: {
        'component': App
      }
    }).$mount()

    Vue.nextTick(() => {
      expect(mockStore.dispatch).toHaveBeenCalled()
      expect(mockStore.dispatch).toHaveBeenCalledWith('myAwesomeAction')
      done()
    })
  })
})

오류:

1) should dispatch myAwesomeAction
     App
     Expected spy dispatch to have been called.
webpack:///src/views/App/test/App.spec.js:49:6 <- index.js:50916:50
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler@webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16
     Expected spy dispatch to have been called with [ 'loadOrganisation' ] but it was never called.
webpack:///src/views/App/test/App.spec.js:50:54 <- index.js:50918:54
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler@webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16

컴포넌트에서 스토어를 유닛 테스트하려고 하기 때문에 일부 요소를 비웃고 다른 요소의 진정한 기능에 의존할 때는 약간의 문제가 있습니다.저는 vuex 전문가가 아닙니다.스토어 액션을 감시하고 컴포넌트의 메서드를 호출하려고 할 때도 비슷한 문제가 있었습니다(문제가 무엇인지 기억나지 않습니다.그 때문에 반나절을 허비했습니다).

제안: 컴포넌트를 유닛으로 테스트한 후 모듈을 유닛으로 테스트합니다.즉, 앱 컴포넌트에서 감시할 수 있습니다.

spyOn(vm, 'myAwesomeAction');
Vue.nextTick(() => {
    expect(vm.myAwesomeAction).toHaveBeenCalled()
    done()
});

(즉, 컴포넌트를 초기화하면 스토어 액션을 호출하는 메서드가 호출됩니다.이 예에서는 myawesomeaction이 mapAction 객체의 이름이 됩니다.)

그리고 나서, 당신은 당신의 스토어를 유닛 테스트 할 수 있습니다.그리고 만약 당신이 myawesomeaction이라고 부르면 그 컴포넌트에 돌연변이가 일어날지 체크할 수 있습니다.

테스트 액션 도우미를 확인하려면 https://vuex.vuejs.org/en/testing.html를 방문하십시오.

언급URL : https://stackoverflow.com/questions/43815275/how-to-unit-test-if-vuex-action-has-been-dispatched-in-vuejs