测试失败：Jest + Vue 3 + Vuex + Typescript：TypeError：无法读取未定义的属性“then”答案

【问题标题】：Test fails : Jest + Vue 3 + Vuex + Typescript : TypeError: Cannot read property 'then' of undefined测试失败：Jest + Vue 3 + Vuex + Typescript：TypeError：无法读取未定义的属性“then”
【发布时间】：2021-10-24 15:36:01
【问题描述】：

我有一个我们将调用 Form.vue 的组件，它有一个按钮，用于触发该组件的方法，其中我有一个存储操作。

我想在调度后链接一个 .then() 函数，但是当我重新运行测试时，它现在失败并显示以下消息：错误：未捕获 [TypeError: 无法读取未定义的属性 'then']

如果我只是评论 .then() 块，测试将通过：

->你知道如何解决这个问题吗？

Form.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
            }
          }
        });
    },

store.ts

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

Form.spec.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);
  });

【问题讨论】：

标签： typescript vue.js jestjs vuex

【解决方案1】：

您在嘲笑 $store 错误。您提供的是返回 void 的函数，而不是返回 Promise 的函数。

试试这个

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

【讨论】：

嘿，感谢您的快速回答，但是似乎我可以让您的代码 sn-ps 使我的测试通过，我现在收到此错误消息：console.error 错误：未捕获 [TypeError：此.$store.dispatch 不是函数]
哎呀。抱歉，请参阅我的更新答案。一个简单的失踪() =>