使用Vite搭建React项目+Vitest v2.1.1测试时.css文件报错如何解决？

这个报错是因为Vitest默认无法处理CSS这类非JavaScript模块文件，以下是几种可行的解决办法：

方案1：Mock CSS文件（推荐，适合大多数测试场景） #

测试阶段通常不需要加载实际的CSS样式，直接mock掉CSS文件即可。

1. 修改项目根目录的vitest.config.js（或vitest.config.ts），添加模块映射配置：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom', // React项目必须配置jsdom环境
    mockReset: true,
    moduleNameMapper: {
      // 匹配所有.css文件，指向自定义的mock文件
      '\\.css$': '<rootDir>/__mocks__/styleMock.js',
    },
  },
});

2. 在项目根目录创建__mocks__/styleMock.js文件，内容如下：

// 普通CSS文件mock成空对象
export default {};

如果你的项目使用CSS Modules，可改用以下mock内容（保证类名能正常获取）：

// CSS Modules mock：返回属性名本身作为类名
export default new Proxy({}, {
  get: (target, prop) => prop,
});

方案2：让Vitest直接处理CSS文件 #

如果测试中需要实际解析CSS（比如验证样式相关逻辑），可以利用Vite的CSS处理能力，修改vitest.config.js：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    css: {
      // 根据你的CSS配置调整，比如开启CSS Modules支持
      modules: {
        classNameStrategy: 'non-scoped',
      },
    },
  },
});

Vitest会自动复用Vite的CSS处理插件来解析CSS文件，避免扩展名报错。

方案3：检查CSS导入路径 #

部分情况下，报错是因为测试文件中CSS的导入路径错误（比如文件不存在、相对路径写错），导致Vitest无法识别文件类型。请检查测试文件中的CSS导入语句，确保路径正确：

// 错误示例：路径错误导致找不到文件
import './../../styles/wrong-path.css';
// 正确示例：路径正确
import '../styles/app.css';

如果使用CSS Modules，确保文件名遵循xxx.module.css的命名规范，Vite才会按模块解析。

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