Vitest排除指定文件/文件夹失效及react-i18n Mock问题求助

问题背景 #

将项目从Jest迁移至Vitest时，配置exclude规则想要排除src/config目录，避免其参与测试执行和覆盖率统计，但规则未生效——运行测试时，该目录下无测试文件的i18n.ts抛出了错误。

环境信息 #

• Windows 11
• Node.js 16.14.0
• Vite 3.1.0
• Vitest 0.23.4

排查结果与解决方案 #

经排查，问题根源并非exclude配置错误，而是src/config/setupTests.ts中对react-i18next的Mock代码写法有误：

• 非异步调用vi.importActual会触发TypeScript类型报错，进而导致src/config目录下的依赖文件被加载并抛出错误
• 改用异步Mock写法，并添加@ts-ignore忽略类型冲突后，问题解决

当前有效配置（vite.config.ts） #

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/config/setupTests.ts',
    css: true,
    mockReset: true,
    restoreMocks: true,
    clearMocks: true,
    include: ['./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    exclude: [
      '**/node_modules/**',
      '**/dist/**',
      '**/cypress/**',
      '**/.{idea,git,cache,output,temp}/**',
      './src/config/**',
    ],
    coverage: {
      exclude: ['./src/config'],
    },
  },
});

Mock代码对比 #

无效写法 #

// 写法1
vi.mock('react-i18next', () => ({
  ...vi.importActual('react-i18next'),
  useTranslation: () => [(key: any) => key],
}));

// 写法2
vi.mock('react-i18next', () => {
  const actual = vi.importActual('react-i18next'),
  return {
         ...actual, 
         useTranslation: () => [(key: any) => key],
   };
}); 

有效写法 #

vi.mock('react-i18next', async () => {
  const actual = await vi.importActual('react-i18next');
  return {
    // @ts-ignore
    ...actual,
    useTranslation: () => [(key: any) => key],
  };
});

内容的提问来源于stack exchange，提问作者j.doe