axios.get.mockResolvedValue() 在 testfile.test.ts (Vue/Vitest) 中被标记为问题

Question

我目前正在将 vitest 集成到我的 Vue 应用程序中。单元测试成功运行。 但是，我收到一条错误消息： '属性“mockResolvedValue”适用于类型“，D = any>(url: string, config?: AxiosRequestConfig | undefined) => Promise”不可用。 ts(2339)'

在测试文件的开头我有以下内容：

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

现在我想在我的 test() 方法中使用模拟的 axios：

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

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

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

这就是问题发生的地方。

谁能告诉我问题出在哪里？

Answer 1

有一个助手

vi.mocked()

可以用打字稿解决这个问题。

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

这应该可以解决它：

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

Answer 2

根据 vi.mocked() 的答案，帮助我解决问题的是： 仅模拟我期望从函数中获得的响应，即如果我有加载函数

// +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 };
};

我只用预期的响应来模拟

load

函数，

//+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);
    });
});

这适用于大多数情况，如果函数返回多个输出，您甚至可以使用多个响应进行模拟

Answer 3

我不知道如何使用

*.test.ts

文件解决这个问题，但我在使用

*.test.js

文件时解决了这个问题。