Vitest describe.concurrent执行失败求助：React并行测试问题

1. 修正代码笔误 #

你的示例代码中第三个测试用例存在标签闭合错误，这会导致组件渲染失败，干扰测试环境：

// 错误写法
render(<Button data-testid="add-button">Test btn</AddButton>)
// 正确写法
render(<Button data-testid="add-button">Test btn</Button>)

2. 确保测试环境完全隔离 #

并行测试时，未及时清理的DOM会造成测试用例间互相干扰，需配置自动清理机制：

1. 创建测试初始化文件（如src/test/setup.ts）：

import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';

// 每个测试结束后自动清理DOM
afterEach(() => {
  cleanup();
});

2. 在vitest.config.ts中引入该文件：

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

export default defineConfig({
  plugins: [react()],
  test: {
    setupFiles: ['./src/test/setup.ts'],
    environment: 'jsdom', // 确保使用浏览器DOM模拟环境
  },
});

3. 验证组件的onClick绑定逻辑 #

确认Button组件正确接收并触发onClick事件，示例组件实现如下：

const Button = ({ onClick, children, ...props }) => {
  return (
    <button onClick={onClick} {...props}>
      {children}
    </button>
  );
};

若组件内部对onClick做了防抖、节流等处理，需调整测试逻辑确保断言能正确触发。

• 保持并行测试启用：Vitest默认开启test.parallel: true，配合describe.concurrent可让组内测试并行执行，充分利用CPU资源。
• 保留测试缓存：默认test.cache: true，Vitest会缓存已通过的测试，仅在代码变更时重新执行对应测试。
• 关闭不必要的功能：若无需代码覆盖率报告，在配置中设置test.coverage.enabled: false，减少额外计算开销。
• 优化依赖mock：对组件依赖的外部服务（如API、全局状态）使用mock替代真实调用，避免IO等待。
• 拆分大型测试用例：将复杂测试拆分为多个小用例，并行执行时效率更高。
• 更新依赖版本：保持vitest、@testing-library/react等依赖为最新版本，官方会持续优化性能。

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