Jest+Vue3+Vuex+Typescript测试报错：Cannot read property 'then' of undefined

你单元测试中 mock 的 $store.dispatch 方法默认返回 undefined，但业务代码里调用 dispatch 后链式调用了 .then() 方法，undefined 不存在 then 属性，因此抛出类型错误。
实际运行环境中 Vuex 的 dispatch 本身会返回 Action 执行结果的 Promise，问题本质是测试侧的 mock 不符合真实接口行为。

直接修改 Form.spec.ts 中 $store 的 mock 定义，让 dispatch 返回 Promise 即可：

describe("Form Answers component", () => {
  it("triggers saveFormAnswers method, when button is clicked", async () => {
    const $store = {
      // 模拟dispatch返回resolved状态的Promise，匹配真实行为
      dispatch: jest.fn(() => Promise.resolve({} as AxiosResponse)),
    };
    const wrapper = shallowMount(FormAnswers, {
      global: {
        mocks: {
          $store,
        },
      },
    });

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

如果后续需要测试请求失败的分支逻辑，也可以根据测试场景让 dispatch 返回 Promise.reject() 模拟接口报错的情况。

内容的提问来源于stack exchange，提问作者AntoineDorelon