How to use vi#mocked correctly?

[rn4n]

Hello 🙋🏼‍♂️

I have a function that creates a Axios instance with some default settings, ie:

import Axios, { type AxiosInstance } from "axios";

export function useHelixClient(token: string): AxiosInstance {
  const { VITE_TWITCH_API, VITE_TWITCH_CLIENT_ID } = import.meta.env;

  const client = Axios.create({ baseURL: VITE_TWITCH_API });
  client.defaults.headers.common = {
    "Client-Id": VITE_TWITCH_CLIENT_ID,
    Accept: "application/vnd.twitchtv.v5+json",
    Authorization: `Bearer ${token}`,
  };

  return client;
}

But I'm getting a error when I try to mock this using vi#mocked in this useHelixClientfunction. This is the error:

FAIL  src/api/__tests__/api.spec.ts > API > A basic describe > A basic test
TypeError: Cannot read properties of undefined (reading 'get')
 ❯ src/api/__tests__/api.spec.ts:11:13
      9|   describe("A basic describe", () => {
     10|     it("A basic test", async () => {
     11|       client.get.mockResolvedValue({ status: 500 });
       |             ^
     12|     });
     13|   });

And here's the code of my test:

import { describe, it, vi } from "vitest";
import { useHelixClient } from "@/api/client";

describe("API", async () => {
  const client = await vi.mocked(useHelixClient("token"), true);

  describe("A basic describe", () => {
    it("A basic test", async () => {
      client.get.mockResolvedValue({ status: 500 });
    });
  });
});

I'm not understand why it's undefined, since it appears to be a mocked function:

Can anyone help me understand what I'm doing wrong? Thank you

[sheremet-va]

vi.mocked is just a type helper. You need to you vi.mock or vi.doMock to actually mock something.