Nuxt.js使用Vue Test Utils测试时$cookies.get未定义如何修复？

• $cookies 是Nuxt框架注入到组件实例的全局属性，单元测试环境默认不会自动注入该依赖，导致组件内访问$cookies时得到undefined，调用get方法直接触发类型错误。
• 当前的axios mock逻辑与实际调用不兼容：组件中使用的是Nuxt挂载的全局$axios.$put方法，你的测试仅mock了原生axios.put，也没有将mock实例注入到测试组件的全局属性中，即使修复cookies问题后也会触发axios相关报错。
• 原axios mock的返回逻辑存在缺陷：jest.mock中定义的put方法没有显式返回值，调用后会返回undefined，无法匹配异步调用的预期。

挂载组件时手动注入所有需要的全局mock依赖，同时修正axios的mock规则匹配Nuxt的调用格式，修改后的测试代码如下：

import { shallowMount } from "@vue/test-utils";
import MyComponent from "~/components/MyComponent/index.vue";

const mockRes = { code: 200 };

// 调整mock规则适配Nuxt的$axios.$put调用
jest.mock("axios", () => ({
  $put: jest.fn(() => Promise.resolve(mockRes))
}));

describe("MyComponent.vue", () => {
  const wrapper = shallowMount(MyComponent, {
    // Vue2版本test-utils请去掉外层global，直接将mocks放在二级参数下
    global: {
      mocks: {
        // 注入mock的cookies实例
        $cookies: {
          get: jest.fn((key) => key === "token" ? "test_fake_token" : null)
        },
        // 注入mock后的axios实例
        $axios: require("axios")
      }
    }
  });

  test("should do something", async () => {
    await wrapper.find('[data-test="do-something"]').trigger("click");
    // 可添加断言验证调用逻辑符合预期
    expect(wrapper.vm.$cookies.get).toHaveBeenCalledWith("token");
    expect(wrapper.vm.$axios.$put).toHaveBeenCalledTimes(1);
  });
});

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