CODEWITHSUNDEEP
vue.jsaxiosmockingvitest
Florian
Florian

Reputation: 105

axios.get.mockResolvedValue() is marked as problem in testfile.test.ts (Vue/Vitest)

I am currently in the process of integrating vitest into my Vue app. The unit tests run successfully. However, I get an error message: 'The property "mockResolvedValue" is for type "<T = any, R = AxiosResponse<T, any>, D = any>(url: string, config?: AxiosRequestConfig | undefined) => Promise" unavailable. ts(2339)'

At the beginning of the test file I have the following:

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

Now I want to use the mocked axios in my test() methods:

const mockedData = {
    "title": "Testtitle",
    "price": 13.98
}

test('Description', async () => {
    axios.get.mockResolvedValue({
        status: 200,
        data: mockedData
    });

    expect(await callFunctionToTest()).toStrictEqual(mockedData)
})

And that's where the problem occures.

Can anyone tell me what the problem is?

Upvotes: 1

Views: 4294

Answers (3)

Monarch
Monarch

Reputation: 11

For Svelte/ SvelteKit Following the answer with vi.mocked(), what helped me to have a work around was: only mock the response I expect to get from the function, i.e if i have a load function

// +page.server.ts
import { useApi } from '$lib/utils/api';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
    const properties = await useApi()
        .path.to.end.point.get({
            query: {
                query_id: 'string'
            }
        })
        .then((res) => res.body);
    return { properties };
};

i only mock the load function with the expected response,

//+page.server.test.ts 
import { describe, it, expect, vi } from 'vitest';
import { load } from './+page.server';
import type { PropertyListingResponse } from '$apitypes';

const properties: ApiResponse[] = vi.hoisted(() => [
    {
        response_id: '550e8411-e29b-41d4-a716-446655440000',
        URL: 'https://website-media.com/assets/auth-background.png',
        name: 'Kit Apartments',
        location: 'Los Angeles',
        country: 'US'
    },
    {
        response_id: '550e8400-e29b-41d4-a716-446655880000',
        URL: 'https://website-media.com/assets/auth-background.png',
        name: 'Kita Apartments',
        location: 'New York',
        country: 'US'
    }
]);
vi.mock('./+page.server.ts');
describe('properties-load', () => {
    it('returns a list of properties', async () => {
        vi.mocked(load).mockResolvedValue(properties);
        const result = (await load()) as Array<ApiResponse>;
        expect(result[0].name).toBe(properties[0].name);
    });
});

This works well for most cases, you can even mock with multiple responses if the funtion returns multiple outputs

Upvotes: 0

froston
froston

Reputation: 1177

There is a helper vi.mocked() to resolve this issue with typescript.

https://vitest.dev/api/vi.html#vi-mocked

This should fix it:

vi.mocked(axios.get).mockResolvedValue()

Upvotes: 3

Florian
Florian

Reputation: 105

I don't know how to solve this problem with *.test.ts file but I solved it when using *.test.js file.

Upvotes: -2

Related Questions