Vue-test-utils:VueX에서 작업이 반환되는 것을 조롱하려면 어떻게 해야 합니까?

Vue-test-utils:VueX에서 작업이 반환되는 것을 조롱하려면 어떻게 해야 합니까?

저는 모듈 스토어에 파견하여 작업을 수행하고 그 결과를 사용하는 Vue 구성 요소에 대한 테스트를 작성하고 있습니다.

이 동작은 API에 대한 호출을 수행하므로 해당 동작으로 테스트를 실행하지 않고 대신 모의 실행하여 일부 더미 데이터를 반환하여 나머지 메서드 흐름이 작동하는지 확인합니다.

따라서 테스트에서 구성 요소 메서드 getData()가 작업의 응답을 데이터에 설정하는지 확인하기 위해 하드 코딩된 데이터만 반환하는 모의 작업을 사용하여 모의 저장소를 추가합니다.

하지만 이것은 효과가 없는 것처럼 보이고 대신 실제 행동이 요구되는 것처럼 보입니다.실제 작업을 호출하지 않고 테스트에 사용할 수 있도록 설정하려면 어떻게 해야 합니까?

구성 요소 방법, 단순화:

methods: {
    async getData() {
        const response = this.$store.dispatch("global/getDataFromAPI")

        if (!response) return

        this.$data.data = {...response.data}
    }
}

테스트 코드, 단순화:

describe('Component.vue', () => {
  let localVue;
  let vuetify;
  let wrapper;
  let store;

  beforeEach(() => {
    localVue = createLocalVue();
    localVue.use(Vuex)
    vuetify = new Vuetify();

    let globalActions = {
      getDataFromAPI: async () => {
        return {
          status: 200,
          data: {
            information1: "ABC",
            information2: 123,
          }
        }
      } 
    }

    store = new Vuex.Store({
      modules: {
        global: {
          actions: globalActions,
          namespaced: false
        },
      }
    })

    wrapper = mount(Component, {
      localVue,
      vuetify,
      attachTo: div,
      mocks: {
        $t: () => { },
        $store: store,
      },
    });
  });

  it('Data is set correctly', async () => {
    await wrapper.vm.getData();

    const dataInformation1 = wrapper.vm.$data.data.information1;
    expect(dataInformation1).toBe("ABC")
  });

첫째, 만약 당신이 조롱하고 싶다면.Vuex Store전화할 필요가 없습니다.localVue.use(Vuex)전화해 보세요localVue.use(Vuex)진짜를 사용할 경우에만Vuex Store시험 중인그리고 만약 당신이 간다면 당신은 통과해야 합니다.store에 따른 반대.localVue그리고 또 다른 주장, 안에서가 아닙니다.mocks소유물.

둘째, 당신의 행동을 조롱할 수 있습니다.store의dispatch다음과 같은 방법:

mocks: {
  $store: {
    dispatch: () => { dummyData: 'dummyData' }
  }
}

언급URL : https://stackoverflow.com/questions/67799453/vue-test-utils-how-do-i-mock-the-return-of-an-action-in-vuex