Typescript 在 Vitest 中模拟 axios 时显示错误

Question

我想在Vitest中模拟模拟axios get请求。在使用

mockimplementationOnce()

模拟请求期间，出现打字稿错误。它说：

Property 'mockImplementationOnce' does not exist on type '<T = any, R = AxiosResponse<T, any>, D = any>(url: string, config?: AxiosRequestConfig<D> | undefined) => Promise<R>'.ts(2339)

为了解决上述问题，我定义了

mockAxios

如下：

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

此外，mocks文件夹包括：

import { vi } from "vitest";

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

但是再次出现以下错误：

Cannot find namespace 'vi'. Did you mean 'Vi'?ts(2833)

如何解决这个问题？

Answer 1

如果您使用

__mocks__

文件夹模拟 axios，则该文件夹需要位于项目的根目录（例如，

__mocks__/axios.ts

）。那么您在测试中需要做的就是

vi.mock("axios")

行：

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

vi.mock("axios");

it("Should return valid value", async () => {
  console.log(axios);
});

如果您需要为特定测试自定义模拟函数，您可以使用

vi.mocked()

函数。它实际上只是一个返回输入对象的类型助手，但它会为您键入它。

it("Should return valid value", async () => {
  vi.mocked(axios, true).get.mockResolvedValueOnce({
    data: { completed: true, title: "dummy data for mocking", userId: 1 },
  });

  console.log(await axios.get(""));
  console.log(await axios.get(""));
});

第一个日志将具有

completed: true

，第二个日志将具有来自

false

版本的

__mocks__

。

注意

vi.mocked<T>(obj: T, deep?: boolean)

上的第二个参数是

true

。这表明它应该输入返回值，并且其属性也被模拟。

需要注意的是，这个函数不做任何模拟，它只是返回输入值，但输入时就好像它已被模拟一样，因此您可以在其上调用诸如

.mockReturnedValueOnce()

之类的东西；您仍然需要在测试文件的根目录调用

vi.mock("axios")

才能进行模拟。

Answer 2

Mocked 与 vi 位于同一命名空间，因此直接导入 Mocked 即可。

import { describe, it, expect, beforeEach, vi, Mocked } from "vitest";