스토어 디스패치 기능이 있는 vue-test-utils 및 jest를 사용하여 컴포넌트에 Vue 메서드의 Vue 테스트 케이스를 작성하는 방법

스토어 디스패치 기능이 있는 vue-test-utils 및 jest를 사용하여 컴포넌트에 Vue 메서드의 Vue 테스트 케이스를 작성하는 방법

나는 나의 vue 컴포넌트에 대한 농담 테스트 케이스를 쓰고 있다.스토어 디스패치 기능을 호출하는 방법이 있다.

dismissed() {
      this.$store.dispatch("alert/hideAlert");
},

테스트 케이스에서는 다음과 같이 해제된 이벤트를 트리거하고 스토어 액션 메서드가 호출하기를 기대하고 있습니다.

 wrapper.vm.dismissed();
 await wrapper.vm.$nextTick();
 expect(actions.hideAlert).toHaveBeenCalled();

단, 해제된 메서드 호출 "discle.vm.discle();"이 테스트 케이스 실행 중 에러 아래에 표시됩니다.

정의되지 않은 '디스패치' 속성을 읽을 수 없습니다.

이 vue 방법을 테스트하려면 어떻게 해야 합니까?

이게 가장 간단한 방법인 것 같아요.

const mockStore = { dispatch: jest.fn() }
const wrapper = shallowMount(YourComponent, {
   mocks: {
      $store: mockStore
   }
}

wrapper.vm.dismissed();
await wrapper.vm.$nextTick();
expect(mockStore.dispatch).toHaveBeenCalledWith('alert/hideAlert');

하지만 다른 방법으로도 할 수 있습니다.이 기사를 확인해 주세요.

언급URL : https://stackoverflow.com/questions/60491227/how-to-write-vue-test-cases-for-vue-method-in-a-component-using-vue-test-utils-a