使用@nuxt/test-utils测试页面时如何Mock依赖？

问题场景 #

测试Nuxt页面渲染时，需要Mock从composable获取的内容（实际场景该composable会调用外部API），但当前Mock代码未生效，页面仍渲染原始值。

复现代码 #

页面文件 ./pages/index.vue #

<script lang="ts" setup>
import useStoreName from '~~/composables/useStoreName';
const storeName = useStoreName();
</script>

<template>
  <h1>{{ storeName }}</h1>
</template>

Composable文件 ./composables/useStoreName.ts #

export default function () {
    return 'original value';
}

无效测试代码 ./tests/pages/index.test.ts #

import { 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'

问题原因 #

Mock写法与实际导出结构不匹配：useStoreName是默认导出的函数，但你Mock时返回了一个名为storeName的属性，页面中是调用默认导出的函数获取值，导致Mock未生效。

修复后的测试代码 #

调整vi.mock的实现，确保默认导出是一个返回Mock值的函数：

import { describe, expect, it, vi } from 'vitest';
import { $fetch, setup } from '@nuxt/test-utils';

// 匹配默认导出的函数结构
vi.mock('~~/composables/useStoreName', () => ({
    default: () => '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');
    });
});

额外说明 #

• 若composable是命名导出（如export const useStoreName = () => {...}），则Mock时需对应命名导出的结构；当前场景为默认导出，必须用default字段匹配。
• 确保vi.mock的路径与页面中导入路径完全一致，Nuxt的~~/别名在测试环境可正常使用。

内容的提问来源于stack exchange，提问作者floriankapaun