Vitest运行Nuxt3页面测试时无法加载Vuetify样式表如何解决

报错原因 #

页面级测试通过@nuxt/test-utils-edge启动独立服务时，Vitest 配置未对齐 Nuxt 侧的 Sass 预处理器规则、路径别名配置，同时 Vuetify 依赖未被标记为内联转译，导致 Sass 编译器找不到 Vuetify 内部的样式依赖文件。组件和状态管理测试因为不涉及页面级样式编译，所以可以正常运行。

修复步骤 #

• 第一步：更新vitest.config.ts配置，补全路径别名、Sass 预处理器配置，将 Vuetify 加入内联转译列表

import {defineConfig} from 'vite';
import Vue from '@vitejs/plugin-vue';
import Vuetify from '@vuetify/vite-plugin';
import {fileURLToPath} from 'node:url'

export default defineConfig({
    plugins: [Vue(), Vuetify({styles: 'sass'})],
    resolve: {
        alias: {
            '@@': __dirname,
            '~': fileURLToPath(new URL('./', import.meta.url)),
            '@': fileURLToPath(new URL('./', import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            sass: {
                additionalData: '@use "vuetify/lib/styles/tools/_index" as *\n'
            }
        }
    },
    test: {
        globals: true,
        environment: 'jsdom',
        deps: {
            inline: [/@nuxt\/test-utils-edge/, 'vuetify'],
        },
    },
});

• 第二步：修改页面测试用例，显式指定 Nuxt 配置文件路径，避免测试环境读取不到配置里的全局样式引入规则

import {describe, test, expect} from 'vitest';
import {setup, $fetch} from '@nuxt/test-utils-edge';
import {fileURLToPath} from 'node:url'

describe('exportPage', async () => {
    await setup({
        server: true,
        configFile: fileURLToPath(new URL('../../nuxt.config.ts', import.meta.url)),
    });
    test('Check export title', async () => {
        const html = await $fetch('/export');
        expect(html).toContain('Export data');
    });
});

• 第三步：如果以上配置完成后仍有报错，新增全局测试 setup 文件手动引入样式
  在测试目录下新建setup.ts，写入以下内容：

import 'vuetify/lib/styles/main.sass'
import 'mdi/css/materialdesignicons.min.css'

在vitest.config.ts的test配置项中添加 setup 文件引用：

test: {
    // 原有配置保留
    setupFiles: ['./test/setup.ts']
}

补充说明：当前使用的Nuxt 3 RC.4、Vuetify 3 beta.4均为非正式稳定版本，和高版本sass存在兼容问题，如果改完配置还是报错，将sass版本降级到1.32.13即可，该版本和当前Vuetify版本的样式编译逻辑完全匹配，不会出现路径解析错误。

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