在Vitest中Mock Axios时遭遇两处TypeScript错误，求解决方案

开发者阿泽

2026-7-25

Vitest Mock Axios时的TypeScript错误解决指南

第一个错误：`mockImplementationOnce`不存在

这个错误是因为TypeScript无法识别axios.get已经被Vitest转化为mock函数。你通过vi.Mocked<typeof axios>断言axios对象的做法是正确的，这段代码可以保留：

import { vi, expect, it } from "vitest";
import axios from "axios";

vi.mock("axios");

const mockAxios = axios as vi.Mocked<typeof axios>

it("Should return valid value", async () => {
  mockAxios.get.mockImplementationOnce(() =>
    Promise.resolve({
      data: { completed: false, title: "dummy data for mocking", userId: 1 },
    })
  );
  // 你的测试逻辑
});

第二个错误：`Cannot find namespace 'vi'`

这个问题出在mocks文件夹的mock文件中，解决方式如下：

方法一：使用全局`vi`对象（推荐）

Vitest会在测试环境自动注入全局vi，直接移除mock文件中的import { vi } from "vitest"即可：

// __mocks__/axios.ts
export default {
  get: vi.fn(() =>
    Promise.resolve({
      data: { completed: false, title: "dummy data for mocking", userId: 1 },
    })
  ),
};

如果TypeScript仍然报错，检查tsconfig.json是否添加了Vitest类型：

{
  "compilerOptions": {
    "types": ["vitest"]
  }
}

方法二：显式导入并别名`vi`

若不想依赖全局对象，可导入vitest的vi并取别名使用：

// __mocks__/axios.ts
import { vi as vitestVi } from "vitest";

export default {
  get: vitestVi.fn(() =>
    Promise.resolve({
      data: { completed: false, title: "dummy data for mocking", userId: 1 },
    })
  ),
};