Jest 调试技巧 #

┌─────────────────────────────────────────────────────────────┐
│                    调试方法                                  │
├─────────────────────────────────────────────────────────────┤
│  1. 日志输出 - console.log、debugger                        │
│  2. 断点调试 - VS Code、Chrome DevTools                     │
│  3. 详细输出 --verbose、--detectOpenHandles                 │
│  4. 错误分析 - 堆栈跟踪、错误消息                            │
└─────────────────────────────────────────────────────────────┘

test('debug with console.log', () => {
  const user = { name: 'John', age: 30 };
  
  console.log('user:', user);
  console.log('user.name:', user.name);
  console.table(user);
  
  expect(user.name).toBe('John');
});

# 显示所有 console 输出
jest --verbose

# 隐藏 console 输出
jest --silent

test('grouped logs', () => {
  console.group('Test Details');
  console.log('Step 1: Setup');
  console.log('Step 2: Execute');
  console.log('Step 3: Verify');
  console.groupEnd();
});

const util = require('util');

test('deep inspect', () => {
  const obj = { a: { b: { c: { d: 1 } } } };
  console.log(util.inspect(obj, { depth: null, colors: true }));
});

test('debug with debugger', () => {
  const value = calculate(1, 2);
  
  debugger; // 执行会在这里暂停
  
  expect(value).toBe(3);
});

# 运行时启用调试
node --inspect-brk node_modules/.bin/jest --runInBand

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Debug",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "--runInBand",
        "--no-cache"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Debug Current File",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${fileBasenameNoExtension}",
        "--runInBand",
        "--no-cache"
      ],
      "console": "integratedTerminal"
    }
  ]
}

# 启动调试模式
node --inspect-brk node_modules/.bin/jest --runInBand

# 打开 Chrome
# chrome://inspect
# 点击 "Open dedicated DevTools for Node"

# 显示详细输出
jest --verbose

PASS  src/utils/math.test.js
  Calculator
    add
      ✓ should add two numbers (2 ms)
      ✓ should add negative numbers (1 ms)
    subtract
      ✓ should subtract two numbers
      ✓ should handle zero

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

# 强制退出
jest --forceExit

# 检测内存泄漏
jest --detectLeaks

test('error example', () => {
  const result = { a: 1, b: 2 };
  expect(result).toEqual({ a: 1, b: 3 });
});

expect(received).toEqual(expected)

Expected: {"a": 1, "b": 3}
Received: {"a": 1, "b": 2}

Difference:
- Expected
+ Received

  Object {
    "a": 1,
-   "b": 3,
+   "b": 2,
  }

test('error matching', () => {
  expect(() => throwError()).toThrow('Error message');
  expect(() => throwError()).toThrow(Error);
  expect(() => throwError()).toThrow(/error/i);
});

test('async error', async () => {
  await expect(asyncError()).rejects.toThrow('Async error');
});

// 或使用 try/catch
test('async error with try/catch', async () => {
  try {
    await asyncError();
  } catch (error) {
    expect(error.message).toBe('Async error');
  }
});

// 问题：测试超时
test('timeout test', async () => {
  await slowOperation();
}, 5000); // 增加超时时间

// 或在配置中设置
// jest.config.js
module.exports = {
  testTimeout: 10000,
};

// 问题：Mock 在导入之后
import { fetchData } from './api';
jest.mock('./api'); // 太晚了

// 解决方案：Mock 必须在导入之前
jest.mock('./api');
import { fetchData } from './api';

// 问题：测试在异步完成前结束
test('bad async', () => {
  fetchData().then(data => {
    expect(data).toBe('expected');
  });
  // 没有 return 或 await
});

// 解决方案
test('good async', async () => {
  const data = await fetchData();
  expect(data).toBe('expected');
});

// 问题：定时器不执行
test('timer issue', () => {
  setTimeout(() => {
    expect(true).toBe(true);
  }, 1000);
  // 测试立即结束
});

// 解决方案
test('timer solution', () => {
  jest.useFakeTimers();

  const callback = jest.fn();
  setTimeout(callback, 1000);

  jest.advanceTimersByTime(1000);
  expect(callback).toHaveBeenCalled();

  jest.useRealTimers();
});

// 问题：元素找不到
test('element not found', () => {
  render(<Component />);
  screen.getByText('Text'); // 抛出错误
});

// 解决方案：使用 debug
test('debug DOM', () => {
  render(<Component />);
  screen.debug(); // 打印 DOM 结构
  screen.getByText('Text');
});

// 问题：快照不匹配
// 1. 检查变更是否正确
// 2. 如果正确，更新快照
// jest -u

import { screen } from '@testing-library/react';

test('debug DOM', () => {
  render(<Component />);
  
  // 打印整个 DOM
  screen.debug();
  
  // 打印特定元素
  screen.debug(screen.getByRole('button'));
  
  // 打印多个元素
  screen.debug(screen.getAllByRole('listitem'));
});

import { prettyDOM } from '@testing-library/react';

test('pretty DOM', () => {
  const { container } = render(<Component />);
  
  console.log(prettyDOM(container));
  console.log(prettyDOM(container.firstChild));
});

import { logTestingPlaygroundURL } from '@testing-library/react';

test('playground URL', () => {
  render(<Component />);
  
  // 生成 Testing Playground URL
  logTestingPlaygroundURL();
});

# 运行单个文件
jest sum.test.js

# 运行匹配模式的测试
jest --testNamePattern="add"

# 使用 only
test.only('only this test runs', () => {});

# 串行运行，更容易调试
jest --runInBand

// jest.config.js
module.exports = {
  maxWorkers: 1,
};

// jest.setup.js
process.on('unhandledRejection', (reason, promise) => {
  console.log('Unhandled Rejection:', reason);
});

process.on('uncaughtException', (error) => {
  console.log('Uncaught Exception:', error);
});

describe('error handling', () => {
  let consoleError;

  beforeEach(() => {
    consoleError = console.error;
    console.error = jest.fn();
  });

  afterEach(() => {
    console.error = consoleError;
  });

  test('handles error', () => {
    // 测试代码
    expect(console.error).toHaveBeenCalled();
  });
});

1. 理解错误消息
   ├── 阅读错误类型
   ├── 查看期望值和实际值
   └── 检查堆栈跟踪

2. 隔离问题
   ├── 只运行失败的测试
   ├── 使用 test.only
   └── 移除无关代码

3. 添加日志
   ├── console.log 关键变量
   ├── screen.debug() DOM 结构
   └── 使用 debugger 断点

4. 检查常见问题
   ├── Mock 是否正确
   ├── 异步是否处理
   ├── 定时器是否 Mock
   └── 状态是否隔离

5. 解决问题
   ├── 修复代码或测试
   ├── 更新快照（如果需要）
   └── 验证修复

# 详细输出
jest --verbose

# 串行运行
jest --runInBand

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

# 检测内存泄漏
jest --detectLeaks

# 强制退出
jest --forceExit

# 清除缓存
jest --clearCache

# 显示配置
jest --showConfig

# 调试模式
node --inspect-brk node_modules/.bin/jest --runInBand

// ❌ 不好的做法 - 盲目修改
// 随意更改代码

// ✅ 好的做法 - 理解后修复
// 1. 阅读错误消息
// 2. 理解期望值和实际值
// 3. 找出差异原因
// 4. 针对性修复

// ❌ 不好的做法 - 在复杂测试中调试
test('complex test', () => {
  // 很多代码...
  // 错误发生在这里
});

// ✅ 好的做法 - 创建最小化测试
test('minimal test', () => {
  const result = problematicFunction();
  expect(result).toBe('expected');
});

// ❌ 不好的做法 - 测试依赖
let sharedState;

test('test 1', () => {
  sharedState = 'value';
});

test('test 2', () => {
  // 依赖 test 1
  expect(sharedState).toBe('value');
});

// ✅ 好的做法 - 测试独立
test('test 1', () => {
  const state = setup();
  expect(state).toBeDefined();
});

test('test 2', () => {
  const state = setup();
  expect(state).toBeDefined();
});