Jest/Vitest并行测试时如何避免console.log输出交错？

不管是 Jest 还是 Vitest，都能通过自定义测试钩子拦截缓存日志，在测试单元执行完成后统一输出，既保留并行测试的效率，又避免日志交错。以下是具体实现方案：

Jest 实现方式 #

通过 setupFilesAfterEnv 配置全局测试钩子，拦截并缓存 console.log，在每个测试用例结束后批量输出：

1. 创建日志处理钩子文件 jest-log-handler.js：

let logCache = [];
const originalLog = console.log;

beforeEach(() => {
  // 重置当前测试用例的日志缓存
  logCache = [];
  // 替换console.log，将输出存入缓存而非直接打印
  console.log = (...args) => {
    logCache.push(args);
  };
});

afterEach(() => {
  // 测试用例完成后，打印缓存的日志
  if (logCache.length > 0) {
    console.log(`=== 测试用例【${expect.getState().currentTestName}】日志 ===`);
    logCache.forEach(args => originalLog(...args));
    console.log('=== 日志结束 ===');
  }
  // 恢复原生console.log
  console.log = originalLog;
});

2. 在 jest.config.js 中引入钩子：

module.exports = {
  setupFilesAfterEnv: ['./jest-log-handler.js'],
  // 保持并行测试默认配置（可根据需求调整线程数）
  maxWorkers: '50%'
};

Vitest 实现方式 #

Vitest 语法与 Jest 高度兼容，同样通过全局钩子实现日志隔离：

1. 创建日志处理钩子文件 vitest-log-handler.js：

import { beforeEach, afterEach } from 'vitest';

let logCache = [];
const originalLog = console.log;

beforeEach(() => {
  logCache = [];
  console.log = (...args) => {
    logCache.push(args);
  };
});

afterEach(({ name }) => {
  if (logCache.length > 0) {
    console.log(`=== 测试用例【${name}】日志 ===`);
    logCache.forEach(args => originalLog(...args));
    console.log('=== 日志结束 ===');
  }
  console.log = originalLog;
});

2. 在 vitest.config.js 中配置钩子：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest-log-handler.js'],
    // 保持并行测试开启（默认启用）
    threads: true,
    maxThreads: 4
  }
});

扩展说明 #

• 若需要按测试文件而非测试用例隔离日志，可将 beforeEach/afterEach 替换为 beforeAll/afterAll，利用多线程隔离特性（每个测试文件在独立线程执行，全局缓存不会冲突），还可通过 __filename 获取当前测试文件路径作为日志前缀。
• 该逻辑可直接扩展到 console.error、console.warn 等其他控制台方法，只需对应替换拦截的方法即可。

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