Typescript shows error during mocking axios in Vitest

Question

I want to mock to mock axios get request in Vitest. During mocking the request using mockimplementationOnce(), the typescript error appears. It says, the following: 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)

For solving the above problem , i defined mockAxios as follows:

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

Also, the mocks folder includes:

import { vi } from "vitest";

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

But again, the following error appears: Cannot find namespace 'vi'. Did you mean 'Vi'?ts(2833)

How can handle this problem?

Answer 1

If you are mocking axios using the __mocks__ folder, that folder would need to be at the root of your project (__mocks__/axios.ts, for example). Then all you need to do in your test is the vi.mock("axios") line:

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

vi.mock("axios");

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

If you need to customize the mocked function for a particular test, you could use the vi.mocked() function. It's really just a type helper that returns the input object, but it types it for you.

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(""));
});

The first log would have completed: true, the second one would have false from the version from __mocks__.

Notice the second argument on vi.mocked<T>(obj: T, deep?: boolean) is true. That is to indicate that it should type the return value with its properties also being mocked.

It is important to note that this function does not do any mocking, it just returns the input value but typed as though it has been mocked so you can call things like .mockReturnedValueOnce() on it; you still have to call vi.mock("axios") at the root of the test file for the mock to occur.