Nuxt 3 / Nitro / Vitest：如何测试使用 Nitro 的 useStorage 的函数答案

【问题标题】：Nuxt 3 / Nitro / Vitest : how to test a function that uses Nitro's useStorageNuxt 3 / Nitro / Vitest：如何测试使用 Nitro 的 useStorage 的函数
【发布时间】：2023-01-04 16:57:19
【问题描述】：

我创建了一个允许管理缓存的函数。
我使用此函数来缓存对 API 调用的响应。

export const cache = async (key: string, callback: Function) => {
    const cacheKey = `cache:${key}`;

    const data = await useStorage().getItem(cacheKey);
    if (data) {
        console.log('Get cached data for key: %s', key);
        return data;
    }

    const result = await callback();

    console.log('Caching data for key: %s', key);
    await useStorage().setItem(cacheKey, result);

    return result;
}

这是一个用例：

import { cache } from '~/server/lib/caching/cache-manager';

export default defineEventHandler(async (event) => {
    const config = useRuntimeConfig();

    const domain = event.context.params.domain;
    const id = event.context.params.id;

    const url = `${config.baseUrl}/api/${domain}/${id}`;

    return await cache(url, () => {
        return $fetch(url);
    });
})

我想用 vitest 测试“缓存”功能。
有关信息，我添加了一个 vitest 插件来管理 Nuxt 别名和自动导入，基于
https://github.com/nuxt/framework/discussions/5379#discussioncomment-4224823

这是测试，它什么都不做，它只是调用“缓存”函数：

import { describe, beforeEach, afterEach, test, expect, vi } from 'vitest'
import { cache } from '~/server/lib/caching/cache-manager'

describe('My test', () => {
    test('my test', () => {
        const result1 = cache('mykey', () => 3);
        const result2 = cache('mykey', () => 3);
    })
})

但是当我调用缓存函数时出现错误：

ReferenceError: useStorage is not defined

无法识别 Nitro 的 useStorage。

我认为问题与不包括服务器自动导入的#imports有关。

我测试了以下解决方法，但它仍然不起作用：
https://github.com/nuxt/framework/issues/4290

你可以在这里测试：
https://stackblitz.com/edit/nuxt-starter-e3vtf2?file=tests%2Fserver%2Flib%2Fcaching%2Fcache-manager.test.ts

如何测试使用“useStorage”的“缓存”功能？

【问题讨论】：

标签： typescript nuxt.js nuxtjs3 vitest nitro

【解决方案1】：

我找到了解决办法。

我创建了一个 storage.ts 文件，其中包含 useStorage 模拟。

import { vi } from "vitest";

const mockedStorage = {
    getItem: vi.fn(),
    setItem: vi.fn()
}

export const useStorage = vi.fn(() => mockedStorage)

我创建了一个导出模拟的 index.ts 文件。

export { useStorage } from './storage'

我在 vitest 配置中声明了 index.ts 文件，以便自动导入声明的模块：

...
Vue(),
autoImport.vite({
    presets: [
        {
            package: srcDir + '/__mocks__/index.ts'
        },
        {
            package: buildDir + '/imports.d.ts'
        }
    ]
}),
...

如果我需要自动导入其他模拟，我将它们添加到index.ts。

我更新了我的测试来测试我的cache函数：

import { describe, beforeEach, afterEach, test, expect, vi } from 'vitest';
import { cache } from '~/server/lib/caching/cache-manager';
import { useStorage } from '~/__mocks__/storage';

describe('My test', () => {
  test('my test', async () => {
    useStorage().getItem.mockReturnValue(3);

    const result = await cache(`myKey`, () => 3);
    expect(useStorage().getItem).toBeCalledWith(`cache:myKey`);
    expect(result).toBe(3);
    expect(useStorage().setItem).not.toBeCalled();
  });

  test('my test 2', async () => {
    useStorage().getItem.mockReturnValue(null);

    const result = await cache(`myKey`, () => 3);
    expect(useStorage().getItem).toBeCalledWith(`cache:myKey`);
    expect(result).toBe(3);
    expect(useStorage().setItem).toBeCalledWith(`cache:myKey`, 3);
  });
});

你可以在这里测试：

https://stackblitz.com/edit/nuxt-starter-tl2ecc?file=tests/server/lib/caching/cache-manager.test.ts

【讨论】：