테스트 실패: Jest + Vue 3 + Vuex + Typescript: TypeError: 정의되지 않은 속성 'then'을 읽을 수 없습니다.

테스트 실패: Jest + Vue 3 + Vuex + Typescript: TypeError: 정의되지 않은 속성 'then'을 읽을 수 없습니다.

Form.vue라고 하는 컴포넌트가 있으며, 이 컴포넌트의 메서드를 트리거하는 버튼이 있으며, 이 컴포넌트에서 스토어 액션을 수행합니다.

디스패치 후에 .then() 함수를 체인으로 하고 싶은데 테스트를 재실행하면 에러:Uncaughed [TypeError: 정의되지 않은 속성 'then'을 읽을 수 없습니다]

.then() 블록을 코멘트만 하면 테스트는 통과합니다.

-> 이 문제를 해결하려면 어떻게 해야 하는지 알고 계십니까?

폼.vue

<script lang="ts">
import { defineComponent } from "vue";
import { AxiosResponse } from "axios";

export default defineComponent({
  name: "Form",
  props: ["FormAnswers"],
  data(): {
    localFormAnswers: FormAnswersType;
  } {
    return {
      localFormAnswers: { ...this.FormAnswers },
    };
  },
  methods: {
    saveFormAnswers() {
      this.$store
        .dispatch("addFormAnswers", this.localFormAnswers)
        .then((response: AxiosResponse) => {
          some function there
            }
          }
        });
    },

스토어.ts

addFormAnswers(
    context: Context,
    formAnswer: FormAnswersType
  ): Promise<void> {
    return HTTP.post("/form-answers/", formAnswer);
  }

폼.스펙.ts

describe("Form Answers component", () => {
  it("triggers saveFormAnswers method, when button is clicked", async () => {
    const $store = {
      dispatch: jest.fn(),
    };
    const wrapper = shallowMount(FormAnswers, {
      global: {
        mocks: {
          $store,
        },
      },
    });

    const spy = jest.spyOn(wrapper.vm, "saveFormAnswers");
    await wrapper.find("button").trigger("click");
    expect(spy).toHaveBeenCalledTimes(1);
  });

당신은 조롱하고 있다.$store틀렸어.함수를 반환하고 있습니다.void반환되는 함수는 없습니다.Promise.

이거 먹어봐

const $store = {
  dispatch: () => new Promise((resolve) => resolve()),
};

언급URL : https://stackoverflow.com/questions/68906932/test-fails-jest-vue-3-vuex-typescript-typeerror-cannot-read-property