4

I'm using vitest to do some unit tests in my vue application. I've written some tests but they fail with the error message: 'TypeError: default is not a function'. But I do not use a function called default() in my code.

import getInfo from './info';

vi.mock('axios', () => {
    return {
        default: {
            get: vi.fn()
        }
    }
});

test('fn getInfo() should request api with axios.get url', async () => {
    const spyAxios = vi.spyOn(axios, 'get');
    await getInfo('1234');
    expect(spyAxios).toHaveBeenCalledWith(`${process.env.VUE_APP_API_BASE_URL}`);
});

If I then execute npm run test the result is the following:

 FAIL  src/api/info/info.test.js > fn getInfo() should request api with axios.get url
TypeError: default is not a function
 ❯ src/api/info/info.test.js:61:22
     59| test('fn getInfo() should request api with axios.get url', async () => {
     60|     const spyAxios = vi.spyOn(axios, 'get');
     61|     await getInfo('1234');
       |                  ^
     62|     expect(spyAxios).toHaveBeenCalledWith(`${process.env.VUE_APP_API_BASE_URL}`);
     63| });

The info.ts file looks like the following:

import { useLoginStore } from "../../store/LoginStore";
import axios from "axios";

// eslint-disable-next-line
export async function getInfo(param: string) : Promise<any> {
    const loginStore = useLoginStore();
    axios.defaults.headers.common = {'Authorization': `Bearer ${loginStore.accessToken}`};
    
    const request = await axios.get(
        process.env.VUE_APP_API_BASE_URL
    );

    if (request?.status == 200) {
        return request.data;
    }
    else {
        return null;
    }
}

Does anyone know what's going on here?

Florian
  • 45
  • 1
  • 4
  • Please share the `info` file – Boussadjra Brahim Jul 21 '22 at 08:46
  • @BoussadjraBrahim I've added the info.ts file to the original question. – Florian Jul 21 '22 at 09:10
  • Ref: *"But I do not use a function called default() in my code."*: `import axios from "axios"` is actually importing axios module's *"default"* export. What's not clear to me is why and where is that export used as a function, because it shouldn't be. Look for any place where you're calling `axios` as a function, especially around current test. – tao Jul 21 '22 at 10:16
  • I use `axios.get()` in info.ts file and `vi.spyOn(axios)` in info.test.js. – Florian Jul 21 '22 at 10:25
  • Additional information: If I execute `vitest --ui` and navigate in the UI to 'Module Graph' and select info.test.js I can see the original code (written by me) and the transformed code of that file which was created by vitest. There I can see the following code line: `await __vite_ssr_import_1__.default('1234');` For me it looks like vitest transforms the code from `await getInfo('1234');` to `await __vite_ssr_import_1__.default('1234');` Could this `default()` method be the problem? – Florian Jul 21 '22 at 10:27
  • I have executed the test in debug mode and found out that the error is actually in the auto-generated file in line `await __vite_ssr_import_1__.default('1234');`. – Florian Jul 22 '22 at 08:58

1 Answers1

3

The default attribute in your return object is not a function (default: {...}). Instead, you would return something like this:

vi.mock('axios', () => ({
  default: () => ({
    get: vi.fn(),
    post: vi.fn(),
  }),
}));
Mark Swardstrom
  • 17,217
  • 6
  • 62
  • 70