升级@mui/x-data-grid至v8.1.0后Vitest单元测试报.css扩展名错误

方案1：配置Vitest处理CSS文件 #

方式A：直接处理CSS（适合需验证样式的测试） #

修改vite.config.ts或vitest.config.ts，让Vitest支持处理node_modules中@mui包的CSS文件：

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    server: {
      deps: {
        inline: ['@mui/x-data-grid', '@mui/material'],
      },
    },
    css: {
      modules: {
        classNameStrategy: 'non-scoped',
      },
    },
  },
});

方式B：Mock CSS文件（适合仅测试组件逻辑的场景） #

如果测试不需要实际样式，可通过全局Mock忽略CSS导入，提升测试速度：

1. 修改配置文件：

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    mockReset: true,
    setupFiles: ['./vitest.setup.ts'],
  },
});

2. 创建vitest.setup.ts文件添加全局Mock：

import { vi } from 'vitest';
vi.mock(/\.css$/, () => ({}));

方案2：通过transformMode指定转换规则 #

在配置中设置transformMode，让Vitest对@mui包的CSS文件进行转换：

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    transformMode: {
      web: [/\.[jt]sx?$/, /\.css$/],
    },
    deps: {
      optimizer: {
        include: ['@mui/x-data-grid', '@mui/material'],
      },
    },
  },
});

最佳实践 #

• 优先使用Mock CSS的方式，单元测试应聚焦组件逻辑而非样式，减少不必要的资源消耗。
• 若需验证样式相关行为（如className渲染），再选择实际处理CSS的配置。
• 始终保持environment: 'jsdom'，确保React组件测试拥有DOM运行环境。
• 确保所有@mui相关包被纳入deps.inline或optimizer.include，避免Vitest跳过转换。

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