我正在尝试测试我的 nuxt 页面是否呈现从可组合项接收的内容。在实际场景中，可组合项将从外部 API 获取信息。为了保持测试的独立性，我想在测试期间模拟返回值。
这是一个简单的复制设置：
./pages/index.vue<script lang="ts" setup>
import useStoreName from '~~/composables/useStoreName';
const storeName = useStoreName();
</script>
<template>
<h1>{{ storeName }}</h1>
</template>
./composables/useStoreName.tsexport default function () {
return 'original value';
}
我尝试了以下方法来测试我的页面，但它不起作用：
./tests/pages/index.test.tsimport { describe, expect, it, vi } from 'vitest';
import { $fetch, setup } from '@nuxt/test-utils';
vi.mock('~~/composables/useStoreName', () => ({
storeName: 'mocked value'
}));
describe('ssr', async () => {
await setup({ server: true, browser: false });
it('renders mocked store name', async () => {
const html = await $fetch('/');
expect(html).toContain('mocked value');
});
});
结果错误代码：
AssertionError: expected '<!DOCTYPE html>\n<html data-head-attr…' to include 'mocked value'
这里的问题是@nuxt/test-utils 启动的服务器在它自己的上下文中运行。您建立的模拟仅在测试中“可见”，而不是测试服务器。
您可以使用这样的插件修改设置中的服务器：
await setup({
server: true,
browser: false,
nuxtConfig: {
runtimeConfig: { valueForPlugin: 'mocked value' },
plugins: ['~/test/plugins/mockstore']
}
});
然后，您在该插件内实现模拟，以便它在测试服务器运行时覆盖该值。您可以通过 runtimeConfig 将测试中的值提供给测试服务器。
插件看起来像这样（还没有测试这个伪代码的工作）：
import { vi } from 'vitest';
export default defineNuxtPlugin((_nuxtApp) => {
vi.mock('~~/composables/useStoreName', () => ({
storeName: _nuxtApp.$config.valueForPlugin
}));
})