面试题手册

Jest 提供了多种测试匹配器（Matchers）来验证不同的条件：相等性匹配器：toBe(value)：严格相等（===）toEqual(value)：深度相等toStrictEqual(value)：严格深度相等（包括 undefined 属性）toMatchObject(object)：部分匹配对象真值匹配器：toBeNull()：只匹配 nulltoBeUndefined()：只匹配 undefinedtoBeDefined()：非 undefinedtoBeTruthy()：真值toBeFalsy()：假值数字匹配器：toBeGreaterThan(number)：大于toBeGreaterThanOrEqual(number)：大于等于toBeLessThan(number)：小于toBeLessThanOrEqual(number)：小于等于toBeCloseTo(number, precision)：浮点数近似相等字符串匹配器：toMatch(regexp | string)：匹配正则或字符串toContain(item)：包含元素或子字符串数组匹配器：toContain(item)：包含元素toContainEqual(item)：包含相等元素toHaveLength(number)：数组长度toBeArray()：是数组对象匹配器：toHaveProperty(keyPath, value)：有特定属性toMatchObject(object)：部分匹配对象函数匹配器：toHaveBeenCalled()：被调用toHaveBeenCalledWith(...args)：用特定参数调用toHaveBeenCalledTimes(n)：调用次数toHaveReturned()：返回值toHaveReturnedWith(value)：返回特定值异常匹配器：toThrow(error?)：抛出错误toThrowErrorMatchingSnapshot()：错误快照自定义匹配器：expect.extend({ toBeWithinRange(received, floor, ceiling) { const pass = received >= floor && received <= ceiling; return { pass, message: () => pass ? `expected ${received} not to be within range ${floor}-${ceiling}` : `expected ${received} to be within range ${floor}-${ceiling}` }; }});test('number within range', () => { expect(100).toBeWithinRange(90, 110);});否定匹配器：所有匹配器都可以使用 .not 进行否定：expect(value).not.toBe(42);expect(array).not.toContain('item');

Jest 提供了多种测试 React Hooks 的方法，主要使用 @testing-library/react-hooks：1. 测试 useState：import { renderHook, act } from '@testing-library/react-hooks';test('useState hook', () => { const { result } = renderHook(() => useCounter(0)); expect(result.current.count).toBe(0); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1);});2. 测试 useEffect：test('useEffect hook', () => { const { result } = renderHook(() => useFetch('/api/data')); expect(result.current.loading).toBe(true); await act(async () => { await waitFor(() => !result.current.loading); }); expect(result.current.data).toBeDefined();});3. 测试 useContext：test('useContext hook', () => { const wrapper = ({ children }) => ( <ThemeContext.Provider value="dark"> {children} </ThemeContext.Provider> ); const { result } = renderHook(() => useTheme(), { wrapper }); expect(result.current.theme).toBe('dark');});4. 测试自定义 Hook：function useCustomHook(initialValue) { const [value, setValue] = useState(initialValue); const double = useMemo(() => value * 2, [value]); return { value, setValue, double };}test('custom hook', () => { const { result } = renderHook(() => useCustomHook(5)); expect(result.current.value).toBe(5); expect(result.current.double).toBe(10); act(() => { result.current.setValue(10); }); expect(result.current.double).toBe(20);});5. 测试异步 Hook：test('async hook', async () => { const { result, waitForNextUpdate } = renderHook(() => useAsyncData()); expect(result.current.loading).toBe(true); await waitForNextUpdate(); expect(result.current.loading).toBe(false); expect(result.current.data).toBeDefined();});6. 测试错误处理：test('hook error handling', async () => { const { result, waitForNextUpdate } = renderHook(() => useFetch('/invalid')); await waitForNextUpdate(); expect(result.current.error).toBeInstanceOf(Error);});最佳实践：使用 renderHook 测试 Hook使用 act 包装状态更新测试 Hook 的初始状态和更新后的状态测试异步 Hook 时使用 waitFor 或 waitForNextUpdate测试错误边界情况保持测试简单，专注于 Hook 的行为

Jest 提供了多种处理定时器的方法，用于测试涉及 setTimeout、setInterval 等定时器的代码：1. 使用假定时器：jest.useFakeTimers();test('timer callback', () => { const callback = jest.fn(); setTimeout(callback, 1000); jest.runAllTimers(); expect(callback).toHaveBeenCalledTimes(1);});2. 运行所有定时器：jest.runAllTimers(); // 运行所有待处理的定时器3. 运行到特定时间：jest.advanceTimersByTime(1000); // 前进 1000msjest.runOnlyPendingTimers(); // 只运行当前待处理的定时器4. 测试 setInterval：test('interval timer', () => { const callback = jest.fn(); setInterval(callback, 1000); jest.advanceTimersByTime(3000); expect(callback).toHaveBeenCalledTimes(3);});5. 清理定时器：afterEach(() => { jest.useRealTimers(); // 恢复真实定时器 jest.clearAllTimers(); // 清除所有定时器});6. 测试定时器清除：test('clear timeout', () => { const callback = jest.fn(); const timeoutId = setTimeout(callback, 1000); clearTimeout(timeoutId); jest.runAllTimers(); expect(callback).not.toHaveBeenCalled();});最佳实践：在测试套件开始时使用 jest.useFakeTimers()测试完成后恢复真实定时器使用 advanceTimersByTime 测试时间依赖逻辑确保清理所有定时器以避免内存泄漏

Jest 提供了多个生命周期钩子函数来管理测试的设置和清理：beforeAll：在当前测试套件的所有测试运行之前执行一次适用于一次性设置，如数据库连接示例：beforeAll(() => { connectDatabase(); });afterAll：在当前测试套件的所有测试运行之后执行一次适用于清理资源，如关闭数据库连接示例：afterAll(() => { disconnectDatabase(); });beforeEach：在当前测试套件的每个测试运行之前执行适用于每个测试的独立设置，如重置状态示例：beforeEach(() => { resetState(); });afterEach：在当前测试套件的每个测试运行之后执行适用于每个测试的清理，如清除 Mock示例：afterEach(() => { jest.clearAllMocks(); });作用域：钩子函数在定义的 describe 块内生效嵌套的 describe 会继承父级钩子可以在多个层级定义钩子示例：describe('User API', () => { beforeAll(() => setupServer()); afterAll(() => teardownServer()); beforeEach(() => { jest.clearAllMocks(); }); test('should create user', () => { /* ... */ }); test('should get user', () => { /* ... */ });});最佳实践：使用 beforeEach 和 afterEach 确保测试隔离使用 beforeAll 和 afterAll 优化性能在 afterEach 中清理 Mock 和定时器保持钩子函数简单，避免复杂逻辑

Jest 提供了参数化测试的方法，可以使用 test.each 或 describe.each 来运行多组测试数据：1. 使用 test.each 进行参数化测试：test.each([ [1, 1, 2], [1, 2, 3], [2, 1, 3],])('adds %i + %i = %i', (a, b, expected) => { expect(add(a, b)).toBe(expected);});2. 使用对象数组：test.each([ { a: 1, b: 1, expected: 2 }, { a: 1, b: 2, expected: 3 }, { a: 2, b: 1, expected: 3 },])('$a + $b = $expected', ({ a, b, expected }) => { expect(add(a, b)).toBe(expected);});3. 使用 describe.each 进行分组测试：describe.each([ ['node', 'node'], ['jsdom', 'browser'],])('test environment: %s', (env, type) => { test(`runs in ${type} environment`, () => { expect(process.env.NODE_ENV).toBeDefined(); });});4. 测试表格数据：test.each` a | b | expected ${1} | ${1} | ${2} ${1} | ${2} | ${3} ${2} | ${1} | ${3}`('returns $expected when $a is added to $b', ({ a, b, expected }) => { expect(add(a, b)).toBe(expected);});5. 测试边界情况：test.each([ [0, 0, 0], [Number.MAX_SAFE_INTEGER, 1, Number.MAX_SAFE_INTEGER + 1], [Number.MIN_SAFE_INTEGER, -1, Number.MIN_SAFE_INTEGER - 1],])('handles edge cases: %i + %i = %i', (a, b, expected) => { expect(add(a, b)).toBe(expected);});6. 测试错误情况：test.each([ [undefined, 'input is required'], [null, 'input is required'], ['', 'input cannot be empty'],])('throws error for invalid input: %p', (input, expectedError) => { expect(() => validate(input)).toThrow(expectedError);});最佳实践：使用参数化测试减少重复代码清晰描述测试数据和预期结果测试正常情况和边界情况使用表格格式提高可读性保持测试数据简洁明了

Jest 提供了丰富的断言方法，主要通过 expect() 函数配合匹配器（matchers）使用：常用匹配器：相等性匹配器：toBe(value)：严格相等（使用 ===）toEqual(value)：深度相等（递归比较对象和数组）toMatchObject(object)：部分匹配对象属性toStrictEqual(value)：严格深度相等（包括 undefined 属性）真值匹配器：toBeNull()：只匹配 nulltoBeUndefined()：只匹配 undefinedtoBeDefined()：非 undefinedtoBeTruthy()：真值（非 false、0、""、null、undefined、NaN）toBeFalsy()：假值数字匹配器：toBeGreaterThan(number)：大于toBeGreaterThanOrEqual(number)：大于等于toBeLessThan(number)：小于toBeLessThanOrEqual(number)：小于等于toBeCloseTo(number, precision)：浮点数近似相等字符串匹配器：toMatch(regexp | string)：匹配正则或字符串toContain(item)：包含元素异步匹配器：resolves：Promise 成功rejects：Promise 失败示例：expect(2 + 2).toBe(4);expect({ name: 'John' }).toEqual({ name: 'John' });expect(null).toBeNull();expect(10).toBeGreaterThan(5);expect('hello').toMatch(/ell/);

Jest 的快照测试（Snapshot Testing）是一种强大的测试工具，用于确保 UI 组件或数据结构不会意外改变：快照测试原理：首次运行时，Jest 会捕获组件的渲染输出并保存为快照文件后续运行时，将当前输出与保存的快照进行比较如果输出发生变化，测试会失败并提示差异基本用法：import renderer from 'react-test-renderer';import Button from './Button';test('Button snapshot', () => { const tree = renderer .create(<Button>Click me</Button>) .toJSON(); expect(tree).toMatchSnapshot();});内联快照：test('inline snapshot', () => { const data = { name: 'John', age: 30 }; expect(data).toMatchInlineSnapshot(` Object { "age": 30, "name": "John", } `);});快照更新：交互式更新：jest -u 或 jest --updateSnapshotCI/CD 中：使用 --ci 标志防止意外更新最佳实践：快照应该简洁且有意义避免在快照中包含动态数据（如时间戳、ID）定期审查和更新过时的快照对于大型组件，考虑使用 toMatchSnapshot({mode: 'deep'})使用自定义序列化器处理特殊对象适用场景：React/Vue 组件渲染测试API 响应数据结构验证配置文件结构检查

Jest 的 Mock 功能是测试中隔离依赖和验证行为的重要工具：1. 创建 Mock 函数：const mockFn = jest.fn();mockFn('arg1', 'arg2');expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2');expect(mockFn).toHaveBeenCalledTimes(1);2. Mock 返回值：const mockFn = jest.fn();mockFn.mockReturnValue(42);mockFn.mockReturnValueOnce(10).mockReturnValueOnce(20);// 或使用 mockResolvedValue 处理 PromisemockFn.mockResolvedValue('data');3. Mock 实现：const mockFn = jest.fn((a, b) => a + b);// 或使用 mockImplementationmockFn.mockImplementation((a, b) => a * b);4. Mock 模块：jest.mock('./api', () => ({ fetchData: jest.fn(() => Promise.resolve('data'))}));import { fetchData } from './api';5. Spy 函数：const spy = jest.spyOn(object, 'method');spy.mockRestore(); // 恢复原函数常用断言：toHaveBeenCalled()：被调用toHaveBeenCalledWith(...args)：用特定参数调用toHaveBeenCalledTimes(n)：调用次数toHaveReturnedWith(value)：返回特定值toHaveLastReturnedWith(value)：最后一次返回值最佳实践：Mock 外部依赖，不 Mock 被测代码测试完成后清理 Mock使用 jest.clearAllMocks() 清除调用记录使用 jest.restoreAllMocks() 恢复原始实现

Jest 是 Facebook 开发的 JavaScript 测试框架，它具有零配置、内置断言库、快照测试、模拟系统和覆盖率报告等特点。Jest 支持并行测试执行，可以显著提高测试速度。它还提供了强大的 CLI 工具和丰富的 API，使得编写测试变得简单直观。Jest 适用于测试 React 组件、Node.js 应用程序以及各种 JavaScript 项目。核心特性：零配置：开箱即用，无需复杂配置内置断言：提供丰富的断言方法快照测试：轻松捕获组件输出模拟系统：强大的 mock 和 spy 功能并行执行：自动并行运行测试覆盖率报告：内置代码覆盖率统计使用场景：Jest 广泛应用于前端测试，特别是 React 项目的单元测试、集成测试和端到端测试。它也适用于 Node.js 后端服务的测试。

Jest 提供了强大的代码覆盖率报告功能，帮助开发者了解测试覆盖情况：生成覆盖率报告：# 运行测试并生成覆盖率报告jest --coverage# 或在 package.json 中配置{ "scripts": { "test:coverage": "jest --coverage" }}覆盖率指标：Statements（语句覆盖率）：被执行的代码语句百分比Branches（分支覆盖率）：被执行的条件分支百分比Functions（函数覆盖率）：被调用的函数百分比Lines（行覆盖率）：被执行的代码行百分比配置覆盖率：// jest.config.jsmodule.exports = { collectCoverage: true, collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/**/*.stories.{js,jsx,ts,tsx}', '!src/index.{js,jsx,ts,tsx}' ], coverageThreshold: { global: { branches: 80, functions: 80, lines: 80, statements: 80 } }, coverageReporters: ['text', 'lcov', 'html']};覆盖率报告格式：text：命令行文本输出lcov：生成 lcov.info 文件，用于 CI/CD 工具html：生成 HTML 报告，可视化查看json：JSON 格式报告最佳实践：设置合理的覆盖率阈值（通常 80%）排除不需要测试的文件（配置文件、类型定义等）在 CI/CD 中集成覆盖率检查定期审查未覆盖的代码关注核心业务逻辑的覆盖率