Jest+Vue3+Vuetify3测试报错：v-btn解析失败及CSS语法错误

1. 解决CSS导入的语法错误 #

Jest本身无法解析CSS文件中的@keyframes等样式语法，需要配置Jest将CSS文件映射为可识别的模块：

步骤： #

• 安装依赖（若需要保留CSS类名映射则安装，否则可跳过直接用空模块）：

npm install identity-obj-proxy --save-dev

• 修改jest.config.js，添加moduleNameMapper配置：

module.exports = {
    testEnvironment: "jsdom",
    moduleFileExtensions: ["js", "json", "vue"],
    transform: {
        "^.+\\.js$": "babel-jest",
        "^.+\\.vue$": "@vue/vue3-jest",
    },
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
    },
    // 新增：处理所有样式文件
    moduleNameMapper: {
        // 方案1：保留类名映射，适合需要测试样式类的场景
        "^.+\\.(css|sass|scss|styl|less)$": "identity-obj-proxy"
        // 方案2：直接映射为空模块，适合不需要测试样式的场景
        // "^.+\\.(css|sass|scss|styl|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
};

若使用方案2，需在项目根目录创建__mocks__/styleMock.js，内容为：

module.exports = {};

2. 确保Vuetify组件正确注册 #

你已编写自定义render函数，需确认以下细节：

• 确保./src/vuetify/vuetify.js正确创建并导出Vuetify实例：

// src/vuetify/vuetify.js
import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.css";
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi";

export const vuetify = createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

• 测试文件必须导入自定义的render函数，而非@testing-library/vue的默认render：

// AppButton.test.js
// 注意：这里导入的是自定义render，不是@testing-library/vue的默认render
import { render, screen } from "./testing-render";
import AppButton from "./AppButton.vue";

test("render AppButton", () => {
    render(AppButton);
    screen.debug();
});

验证测试运行 #

完成配置后重新执行测试：

npm run test

此时应该能正常渲染包含v-btn的组件，不再出现CSS语法错误和组件未解析的警告。

内容的提问来源于stack exchange，提问作者Александр Андреев