[Vue 警告]：v-on 处理程序中的错误（Promise/async）：“TypeError：无法读取未定义的属性 'get'”vue 测试工具

Question

我正在尝试像这样模拟axios 将请求放入nuxt.js：

组件方法（Composition API 方法）：

const doSomething = async (): Promise<void> => {
  const token = $cookies.get("token");
  const headers = {
    Authorization: `Bearer ${token}`,
  };
  try {
    const response = await $axios.$put(
      `/api/v1/post/${data.value.id}/update`,
      {
        status: "ok",
      },
      { headers }
    );
  } catch (err) {
    console.log(err);
  }
};

和测试文件：

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

const mockedAxios = axios as jest.Mocked<typeof axios>
const mockRes = { code: 200 };

jest.mock("axios", () => ({
  put: jest.fn(() => {
    mockRes;
  }),
}));
describe("MyComponent.vue", () => {
  const wrapper = shallowMount(MyComponent);
  test("should do something", async () => {
    await wrapper.find('[data-test="do-something"]').trigger("click");
  });
});

您可以看到一切看起来都很好，但是当我运行测试时，我在控制台中遇到了一些错误 例如，我此时收到此错误：

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'get' of undefined"

我认为它用于 $cookies.get

但是为什么会这样呢？我该如何解决？

Answer 1

你可以像这样模拟$cookies：

const wrapper = shallowMount(MyComponent, {
    mocks: {
      $cookies: {
         get: jest.fn()
      }    
    }
});