Jest 性能优化 #

┌─────────────────────────────────────────────────────────────┐
│                    性能优化策略                              │
├─────────────────────────────────────────────────────────────┤
│  1. 并行执行 - 充分利用多核 CPU                              │
│  2. 缓存优化 - 避免重复工作                                  │
│  3. 增量测试 - 只运行相关测试                                │
│  4. 测试隔离 - 减少测试间依赖                                │
│  5. 配置优化 - 减少不必要的处理                              │
└─────────────────────────────────────────────────────────────┘

// jest.config.js
module.exports = {
  maxWorkers: '50%',  // 使用 50% CPU 核心
  // 或
  maxWorkers: 4,      // 固定使用 4 个 worker
  // 或
  maxWorkers: 1,      // 串行执行
};

# 使用 50% CPU
jest --maxWorkers=50%

# 使用固定数量
jest --maxWorkers=4

# 串行执行
jest --runInBand

// jest.config.js
module.exports = {
  maxWorkers: process.env.CI ? 2 : '50%',
};

// jest.config.js
module.exports = {
  cache: true,
  cacheDirectory: '/tmp/jest_cache',
};

# 清除缓存
jest --clearCache

# 忽略缓存运行
jest --no-cache

# 查看缓存位置
jest --showConfig | grep cacheDirectory

# 只运行与修改文件相关的测试
jest --onlyChanged

# 只运行与 git 变更相关的测试
jest --changedSince=main

# 监听模式
jest --watch

# 监听所有文件
jest --watchAll

// jest.config.js
module.exports = {
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
};

// ❌ 不好的做法
describe('shared state', () => {
  let counter = 0;

  test('test 1', () => {
    counter++;
    expect(counter).toBe(1);
  });

  test('test 2', () => {
    // 依赖 test 1 的状态
    expect(counter).toBe(1);
  });
});

// ✅ 好的做法
describe('isolated state', () => {
  let counter;

  beforeEach(() => {
    counter = 0;
  });

  test('test 1', () => {
    counter++;
    expect(counter).toBe(1);
  });

  test('test 2', () => {
    expect(counter).toBe(0);
  });
});

// ❌ 不好的做法 - 每个测试都执行重操作
beforeEach(async () => {
  await setupDatabase();
  await seedData();
});

// ✅ 好的做法 - 只在需要时执行
describe('database tests', () => {
  beforeAll(async () => {
    await setupDatabase();
  });

  beforeEach(async () => {
    await clearData();
  });
});

// jest.config.js
module.exports = {
  transformIgnorePatterns: [
    // 只转换需要的 node_modules
    'node_modules/(?!(react-router-dom|axios)/)',
  ],
};

// 使用 esbuild-jest 替代 babel-jest
module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'esbuild-jest',
  },
};

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [
    'node_modules/',
    '\\.css$',
    '\\.scss$',
  ],
};

// ❌ 不好的做法 - Mock 所有依赖
jest.mock('lodash');
jest.mock('axios');
jest.mock('moment');

// ✅ 好的做法 - 只 Mock 必要的依赖
jest.mock('axios');

// ❌ 不好的做法 - 复杂的 Mock
jest.mock('./api', () => {
  const original = jest.requireActual('./api');
  return {
    ...original,
    fetch: jest.fn(() => {
      return new Promise((resolve) => {
        setTimeout(() => resolve({ data: 'test' }), 100);
      });
    }),
  };
});

// ✅ 好的做法 - 简单的 Mock
jest.mock('./api', () => ({
  fetch: jest.fn().mockResolvedValue({ data: 'test' }),
}));

// ❌ 不好的做法 - 一个大文件
// user.test.js - 1000+ 行

// ✅ 好的做法 - 拆分为多个文件
// user.auth.test.js
// user.profile.test.js
// user.settings.test.js

// 并行运行测试
test.concurrent('concurrent test 1', async () => {
  await someAsyncOperation();
});

test.concurrent('concurrent test 2', async () => {
  await someAsyncOperation();
});

// 使用 test.skip 跳过慢测试
test.skip('slow test', () => {
  // 耗时测试
});

// 条件跳过
const runSlowTests = process.env.RUN_SLOW_TESTS === 'true';
const testFn = runSlowTests ? test : test.skip;

testFn('slow test', () => {
  // 耗时测试
});

// ❌ 不好的做法 - 整个组件树
expect(container.innerHTML).toMatchSnapshot();

// ✅ 好的做法 - 关键部分
expect(screen.getByRole('button')).toMatchSnapshot();

// 内联快照更快
expect(value).toMatchInlineSnapshot(`"expected value"`);

// jest.config.js
module.exports = {
  testMatch: [
    '<rootDir>/src/**/*.test.{js,ts}',
  ],
  testPathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
    '/coverage/',
  ],
};

// 只在需要时收集覆盖率
module.exports = {
  collectCoverage: false,  // 默认不收集
};

// CI 中启用
// jest --coverage

module.exports = {
  moduleDirectories: ['node_modules', 'src'],
  modulePaths: ['<rootDir>/src'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

# 检测内存泄漏
jest --detectLeaks

# 记录内存使用
jest --logHeapUsage

# 检测未关闭的句柄
jest --detectOpenHandles

// package.json
{
  "scripts": {
    "test:perf": "node scripts/test-performance.js"
  }
}

// scripts/test-performance.js
const { execSync } = require('child_process');

const start = Date.now();
execSync('jest --runInBand', { stdio: 'inherit' });
const duration = Date.now() - start;

console.log(`Tests completed in ${duration}ms`);

# 将测试分为 4 片，运行第 1 片
jest --shard=1/4

# 在 CI 中并行运行
# Job 1: jest --shard=1/4
# Job 2: jest --shard=2/4
# Job 3: jest --shard=3/4
# Job 4: jest --shard=4/4

jobs:
  test:
    strategy:
      matrix:
        shard: [1/4, 2/4, 3/4, 4/4]
    steps:
      - run: npm test -- --shard=${{ matrix.shard }}

# GitHub Actions
- name: Cache node modules
  uses: actions/cache@v3
  with:
    path: |
      ~/.npm
      node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

- name: Cache Jest
  uses: actions/cache@v3
  with:
    path: .jest-cache
    key: ${{ runner.os }}-jest-${{ hashFiles('**/package-lock.json') }}

□ 并行执行
  ├── 配置合理的 maxWorkers
  ├── CI 环境使用固定 worker 数
  └── 使用 test.concurrent

□ 缓存优化
  ├── 启用 Jest 缓存
  ├── CI 中缓存依赖
  └── 定期清理缓存

□ 增量测试
  ├── 使用 --onlyChanged
  ├── 使用 --changedSince
  └── Watch 模式开发

□ 测试隔离
  ├── 避免共享状态
  ├── 减少钩子开销
  └── 清理 Mock

□ 转换优化
  ├── 优化 transformIgnorePatterns
  ├── 使用更快的转换器
  └── 跳过不必要的转换

□ Mock 优化
  ├── 减少不必要的 Mock
  ├── 使用轻量 Mock
  └── 清理 Mock

□ 配置优化
  ├── 减少测试匹配范围
  ├── 减少覆盖率收集
  └── 优化模块解析

□ CI 优化
  ├── 使用测试分片
  ├── 缓存依赖
  └── 并行运行

优化前:
- 测试数量: 500
- 执行时间: 120s
- 内存使用: 2GB

优化后:
- 测试数量: 500
- 执行时间: 30s (↓75%)
- 内存使用: 800MB (↓60%)