neo-cmp-cli 1.12.8 → 1.12.10

package/template/develop//345/215/225/345/205/203/346/265/213/350/257/225/344/275/277/347/224/250/350/257/264/346/230/216.md

@@ -1,1139 +0,0 @@
-# Jest 使用指南
-
-## 目录
-
-- [什么是 Jest](#什么是-jest)
-- [快速开始](#快速开始)
-- [Jest 配置](#jest-配置)
-- [基础语法](#基础语法)
-- [测试文件组织](#测试文件组织)
-- [常用断言](#常用断言)
-- [Mock 使用](#mock-使用)
-- [异步测试](#异步测试)
-- [生命周期钩子](#生命周期钩子)
-- [测试覆盖率](#测试覆盖率)
-- [常见问题](#常见问题)
-- [最佳实践](#最佳实践)
-
-## 什么是 Jest
-
-Jest 是 Facebook 开发的一个 JavaScript 测试框架，具有以下特点：
-
-- ✅ **零配置**：开箱即用，无需复杂配置
-- ✅ **快速**：并行运行测试，提高效率
-- ✅ **内置 Mock**：强大的 Mock 功能
-- ✅ **代码覆盖率**：自动生成覆盖率报告
-- ✅ **快照测试**：轻松测试 UI 组件
-
-## 快速开始
-
-### 安装
-
-```bash
-npm install --save-dev jest
-# 或
-yarn add --dev jest
-```
-
-### 运行测试
-
-#### 如何启动 Jest
-
-Jest 可以通过多种方式启动：
-
-**1. 使用 npm/yarn 脚本（推荐）**
-
-在 `package.json` 中配置测试脚本：
-
-```json
-{
-  "scripts": {
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  }
-}
-```
-
-然后运行：
-```bash
-# 运行所有测试
-npm test
-# 或
-yarn test
-
-# 监听模式（文件变化时自动运行）
-npm test -- --watch
-
-# 生成覆盖率报告
-npm test -- --coverage
-```
-
-**2. 直接使用 Jest 命令**
-
-如果全局安装了 Jest：
-```bash
-jest
-jest --watch
-jest --coverage
-```
-
-**3. 使用 npx（无需全局安装）**
-
-```bash
-npx jest
-npx jest --watch
-npx jest --coverage
-```
-
-**4. 运行特定测试**
-
-```bash
-# 运行特定文件
-npm test -- index.test.tsx
-
-# 运行匹配模式的文件
-npm test -- --testNamePattern="应该正确初始化"
-
-# 运行特定目录
-npm test -- src/components/Button
-```
-
-**5. 其他常用选项**
-
-```bash
-# 只运行失败的测试
-npm test -- --onlyFailures
-
-# 更新快照
-npm test -- --updateSnapshot
-
-# 详细输出
-npm test -- --verbose
-```
-
-## Jest 配置
-
-### 配置文件位置
-
-Jest 支持多种配置方式，按优先级从高到低：
-
-1. **`jest.config.js`** 或 **`jest.config.ts`**（推荐）
-   - 放在项目根目录
-   - 使用 CommonJS 或 ES6 模块语法
-
-2. **`package.json`** 中的 `jest` 字段
-   ```json
-   {
-     "jest": {
-       "testEnvironment": "jsdom"
-     }
-   }
-   ```
-
-3. **命令行参数**
-   ```bash
-   jest --testEnvironment=jsdom
-   ```
-
-### 基础配置选项
-
-#### 1. 测试环境 (testEnvironment)
-
-指定测试运行的环境：
-
-```javascript
-module.exports = {
-  // 'node' - Node.js 环境（默认）
-  // 'jsdom' - 浏览器环境（用于测试 React 组件）
-  testEnvironment: 'jsdom'
-}
-```
-
-#### 2. 测试文件匹配 (testMatch)
-
-指定哪些文件被视为测试文件：
-
-```javascript
-module.exports = {
-  // 默认值
-  testMatch: [
-    '**/__tests__/**/*.[jt]s?(x)',
-    '**/?(*.)+(spec|test).[jt]s?(x)'
-  ],
-  
-  // 自定义：只匹配 __test__ 目录下的文件
-  testMatch: ['**/__test__/**/*.test.(ts|tsx)']
-}
-```
-
-#### 3. 搜索根目录 (roots)
-
-指定 Jest 搜索测试文件的根目录：
-
-```javascript
-module.exports = {
-  roots: ['<rootDir>/src', '<rootDir>/__test__']
-}
-```
-
-#### 4. 模块路径映射 (moduleNameMapper)
-
-配置路径别名，类似于 webpack 的 alias：
-
-```javascript
-module.exports = {
-  moduleNameMapper: {
-    // 路径别名
-    '^@components/(.*)$': '<rootDir>/src/components/$1',
-    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
-    
-    // Mock 静态资源
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js'
-  }
-}
-```
-
-#### 5. 模块目录 (moduleDirectories)
-
-指定模块解析的目录：
-
-```javascript
-module.exports = {
-  moduleDirectories: ['node_modules', 'src']
-}
-```
-
-### TypeScript 项目配置
-
-#### 使用 ts-jest preset（推荐）
-
-```javascript
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom'
-}
-```
-
-#### 自定义 TypeScript 转换
-
-```javascript
-module.exports = {
-  transform: {
-    '^.+\\.(ts|tsx)$': [
-      'ts-jest',
-      {
-        // ts-jest 配置选项
-        diagnostics: false,  // 禁用类型检查（加快速度）
-        isolatedModules: true,  // 启用隔离模块模式
-        tsconfig: {
-          // TypeScript 编译选项
-          target: 'ES2019',
-          module: 'commonjs',
-          jsx: 'react',
-          esModuleInterop: true,
-          experimentalDecorators: true  // 支持装饰器
-        }
-      }
-    ]
-  }
-}
-```
-
-### React 项目配置
-
-#### 完整配置示例
-
-```javascript
-module.exports = {
-  // 测试环境
-  testEnvironment: 'jsdom',
-  
-  // 详细输出
-  verbose: true,
-  
-  // 搜索根目录
-  roots: ['<rootDir>/src'],
-  
-  // TypeScript 预设
-  preset: 'ts-jest',
-  
-  // 转换配置
-  transform: {
-    '^.+\\.(ts|tsx)$': ['ts-jest', { diagnostics: false }],
-    '^.+\\.(js|jsx)$': 'babel-jest'
-  },
-  
-  // 忽略转换的模块
-  transformIgnorePatterns: [
-    'node_modules/(?!(uuid|axios)/)'  // 不忽略 uuid 和 axios
-  ],
-  
-  // 模块路径映射
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js'
-  },
-  
-  // 测试文件匹配
-  testMatch: ['**/__test__/**/*.test.(ts|tsx)'],
-  
-  // 模块文件扩展名
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  
-  // 测试前执行的脚本
-  setupFilesAfterEnv: ['<rootDir>/__test__/setupTests.ts']
-}
-```
-
-### 全局设置文件 (setupFilesAfterEnv)
-
-在每个测试文件运行前执行的脚本，用于全局配置：
-
-```javascript
-// jest.config.js
-module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/__test__/setupTests.ts']
-}
-```
-
-```typescript
-// __test__/setupTests.ts
-import '@testing-library/jest-dom'
-
-// Mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn()
-}))
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-})
-```
-
-### 覆盖率配置
-
-#### 收集覆盖率
-
-```javascript
-module.exports = {
-  // 收集覆盖率的文件范围
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/**/*.d.ts',           // 排除类型定义文件
-    '!src/**/*.test.{ts,tsx}',  // 排除测试文件
-    '!src/**/*.stories.{ts,tsx}', // 排除 Storybook 文件
-    '!src/index.tsx'            // 排除入口文件
-  ],
-  
-  // 覆盖率阈值
-  coverageThreshold: {
-    global: {
-      branches: 75,    // 分支覆盖率至少 75%
-      functions: 85,   // 函数覆盖率至少 85%
-      lines: 85,      // 行覆盖率至少 85%
-      statements: 85  // 语句覆盖率至少 85%
-    }
-  },
-  
-  // 覆盖率报告格式
-  coverageReporters: ['text', 'lcov', 'html']
-}
-```
-
-### 其他常用配置
-
-#### 1. 全局变量 (globals)
-
-```javascript
-module.exports = {
-  globals: {
-    __DEV__: true,
-    __TEST__: true
-  }
-}
-```
-
-#### 2. 测试超时时间 (testTimeout)
-
-```javascript
-module.exports = {
-  testTimeout: 10000  // 10 秒（默认 5 秒）
-}
-```
-
-#### 3. 最大并发数 (maxWorkers)
-
-```javascript
-module.exports = {
-  maxWorkers: '50%'  // 使用 50% 的 CPU 核心
-  // 或指定具体数量
-  // maxWorkers: 4
-}
-```
-
-#### 4. 清除 Mock (clearMocks)
-
-```javascript
-module.exports = {
-  clearMocks: true,        // 每个测试前自动清除 Mock
-  resetMocks: true,        // 每个测试前自动重置 Mock
-  restoreMocks: true      // 每个测试前自动恢复原始实现
-}
-```
-
-#### 5. 快照序列化器 (snapshotSerializers)
-
-```javascript
-module.exports = {
-  snapshotSerializers: ['enzyme-to-json/serializer']
-}
-```
-
-### 实际项目配置示例
-
-基于本项目的实际配置：
-
-```javascript
-// jest.config.js
-module.exports = {
-  // 测试环境：浏览器环境（用于测试 React 组件）
-  testEnvironment: 'jsdom',
-  
-  // 详细输出模式
-  verbose: true,
-  
-  // 搜索根目录
-  roots: ['<rootDir>/src', '<rootDir>/__test__'],
-  
-  // TypeScript 预设
-  preset: 'ts-jest',
-  
-  // 转换配置
-  transform: {
-    '^.+\\.(ts|tsx)$': [
-      'ts-jest',
-      {
-        diagnostics: false,
-        isolatedModules: true,
-        tsconfig: {
-          target: 'ES2019',
-          module: 'commonjs',
-          jsx: 'react',
-          experimentalDecorators: true,
-          emitDecoratorMetadata: true
-        }
-      }
-    ],
-    '^.+\\.(js|jsx)$': 'babel-jest'
-  },
-  
-  // 忽略转换的模块（某些 ES6 模块需要转换）
-  transformIgnorePatterns: ['node_modules/(?!(uuid|axios)/)'],
-  
-  // 模块目录
-  moduleDirectories: ['node_modules', 'src'],
-  
-  // 模块路径映射
-  moduleNameMapper: {
-    // 包别名
-    '^neo-ui-common$': '<rootDir>/../neo-ui-common/src',
-    '^neo-ui-common/(.*)$': '<rootDir>/../neo-ui-common/src/$1',
-    
-    // 路径别名
-    '^@components/(.*)$': '<rootDir>/src/components/$1',
-    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
-    
-    // Mock 静态资源
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
-    
-    // Mock 特定模块
-    '^uuid$': '<rootDir>/src/__mocks__/uuid.js'
-  },
-  
-  // 测试前执行的脚本
-  setupFilesAfterEnv: ['<rootDir>/__test__/setupTests.ts'],
-  
-  // 测试文件匹配规则
-  testMatch: ['**/__test__/**/*.test.(ts|tsx)'],
-  
-  // 模块文件扩展名
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  
-  // 覆盖率配置
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/**/*.d.ts',
-    '!src/**/*.test.{ts,tsx}',
-    '!src/**/*.stories.{ts,tsx}',
-    '!src/index.tsx'
-  ],
-  
-  // 覆盖率阈值
-  coverageThreshold: {
-    global: {
-      branches: 75,
-      functions: 85,
-      lines: 85,
-      statements: 85
-    }
-  }
-}
-```
-
-### 配置验证
-
-运行以下命令验证配置是否正确：
-
-```bash
-# 显示 Jest 配置信息
-npx jest --showConfig
-
-# 列出所有匹配的测试文件（不运行）
-npx jest --listTests
-```
-
-### 配置最佳实践
-
-1. **使用 `jest.config.js`**：将配置放在独立的配置文件中，便于管理
-2. **合理设置 `testMatch`**：明确指定测试文件的匹配规则
-3. **配置路径别名**：使用 `moduleNameMapper` 简化导入路径
-4. **Mock 静态资源**：避免在测试中处理图片、样式等静态资源
-5. **设置覆盖率阈值**：确保代码质量
-6. **使用 `setupFilesAfterEnv`**：统一全局测试环境配置
-
-## 基础语法
-
-### 最简单的测试
-
-```javascript
-// math.test.js
-function add(a, b) {
-  return a + b
-}
-
-test('1 + 2 应该等于 3', () => {
-  expect(add(1, 2)).toBe(3)
-})
-```
-
-### 使用 describe 分组
-
-```javascript
-describe('计算器功能', () => {
-  test('加法测试', () => {
-    expect(add(1, 2)).toBe(3)
-  })
-
-  test('减法测试', () => {
-    expect(subtract(5, 2)).toBe(3)
-  })
-})
-```
-
-### test 和 it 的区别
-
-`test` 和 `it` 是完全一样的，只是写法不同：
-
-```javascript
-// 两种写法等价
-test('测试名称', () => {})
-it('测试名称', () => {})
-```
-
-## 测试文件组织
-
-### Jest 如何找到单元测试文件？
-
-Jest 通过以下方式自动发现和运行测试文件：
-
-**1. 默认搜索规则**
-
-Jest 会按照以下规则查找测试文件：
-- 文件名包含 `.test.` 或 `.spec.` 的文件
-- 文件扩展名：`.js`、`.jsx`、`.ts`、`.tsx`
-- 默认搜索目录：项目根目录下的所有文件
-
-**2. 配置文件中的 `testMatch`**
-
-在 `jest.config.js` 中可以自定义测试文件匹配规则：
-
-```javascript
-module.exports = {
-  // 自定义测试文件匹配模式
-  testMatch: [
-    '**/__test__/**/*.test.(ts|tsx)',  // __test__ 目录下的 .test.ts 或 .test.tsx 文件
-    '**/?(*.)+(spec|test).(ts|tsx)'     // 任何位置的 .spec.ts 或 .test.ts 文件
-  ]
-}
-```
-
-**3. 配置文件中的 `roots`**
-
-指定 Jest 搜索的根目录：
-
-```javascript
-module.exports = {
-  roots: ['<rootDir>/src', '<rootDir>/__test__']
-  // Jest 只会在 src 和 __test__ 目录下搜索测试文件
-}
-```
-
-**4. 搜索优先级**
-
-Jest 会按照以下顺序查找：
-1. 首先检查 `testMatch` 配置
-2. 如果没有配置，使用默认规则：`**/__tests__/**/*.[jt]s?(x)` 和 `**/?(*.)+(spec|test).[jt]s?(x)`
-3. 在 `roots` 指定的目录中搜索（如果配置了的话）
-
-**5. 实际示例**
-
-假设项目结构如下：
-```
-project/
-├── src/
-│   ├── components/
-│   │   ├── Button/
-│   │   │   ├── index.tsx
-│   │   │   └── __test__/
-│   │   │       └── index.test.tsx  ✅ 会被找到
-│   │   └── Input.tsx
-│   └── utils.test.tsx  ✅ 会被找到
-└── __test__/
-    └── integration.test.tsx  ✅ 会被找到
-```
-
-如果配置了 `testMatch: ['**/__test__/**/*.test.(ts|tsx)']`，则只有 `__test__` 目录下的测试文件会被找到。
-
-### 文件命名
-
-- 测试文件以 `.test.js`、`.test.ts`、`.test.tsx` 结尾
-- 或者以 `.spec.js`、`.spec.ts`、`.spec.tsx` 结尾
-
-### 目录结构
-
-推荐的项目结构：
-
-```
-src/
-├── components/
-│   ├── Button/
-│   │   ├── index.tsx
-│   │   └── __test__/
-│   │       └── index.test.tsx
-│   └── Input/
-│       ├── index.tsx
-│       └── index.test.tsx
-```
-
-**注意：**
-- 测试文件可以放在 `__test__` 目录下（推荐，便于管理）
-- 也可以放在与被测试文件相同的目录下（如 `Button.test.tsx` 与 `Button.tsx` 同级）
-- 根据项目配置的 `testMatch` 规则选择合适的命名和位置
-
-## 常用断言
-
-### 基础断言
-
-```javascript
-// 相等性判断
-expect(1 + 1).toBe(2)              // 严格相等 ===
-expect({a: 1}).toEqual({a: 1})     // 对象值相等
-expect({a: 1}).toStrictEqual({a: 1}) // 严格相等（推荐）
-
-// 真值判断
-expect(true).toBeTruthy()
-expect(false).toBeFalsy()
-expect(null).toBeNull()
-expect(undefined).toBeUndefined()
-
-// 数字比较
-expect(2).toBeGreaterThan(1)
-expect(1).toBeLessThan(2)
-expect(0.1 + 0.2).toBeCloseTo(0.3) // 浮点数比较
-
-// 字符串匹配
-expect('hello').toMatch(/llo/)
-expect('hello').toContain('ell')
-
-// 数组/对象包含
-expect([1, 2, 3]).toContain(2)
-expect({a: 1, b: 2}).toHaveProperty('a')
-```
-
-### 函数调用断言
-
-```javascript
-const mockFn = jest.fn()
-
-mockFn('参数1', '参数2')
-
-// 检查是否被调用
-expect(mockFn).toHaveBeenCalled()
-
-// 检查调用次数
-expect(mockFn).toHaveBeenCalledTimes(1)
-
-// 检查调用参数
-expect(mockFn).toHaveBeenCalledWith('参数1', '参数2')
-
-// 检查最后一次调用
-expect(mockFn).toHaveBeenLastCalledWith('参数1', '参数2')
-
-// 检查返回值
-expect(mockFn).toHaveReturned()
-expect(mockFn).toHaveReturnedWith('返回值')
-```
-
-### 异常断言
-
-```javascript
-// 应该抛出异常
-expect(() => {
-  throw new Error('错误')
-}).toThrow()
-
-// 应该抛出特定错误
-expect(() => {
-  throw new Error('错误')
-}).toThrow('错误')
-
-// 不应该抛出异常
-expect(() => {
-  normalFunction()
-}).not.toThrow()
-```
-
-## Mock 使用
-
-### 什么是 Mock？
-
-**Mock（模拟）** 是测试中的一个重要概念，用于创建虚假的依赖对象或函数，以便在测试中：
-
-1. **隔离测试单元**：避免测试代码受到外部依赖（如 API、数据库、文件系统等）的影响
-2. **控制测试环境**：模拟各种场景（成功、失败、边界情况）而不需要真实的外部服务
-3. **提高测试速度**：避免真实的网络请求、数据库操作等耗时操作
-4. **增强测试稳定性**：不依赖外部服务的可用性和状态
-
-**常见使用场景：**
-- Mock API 请求：避免在测试中发送真实的 HTTP 请求
-- Mock 模块依赖：替换难以测试的第三方模块
-- Mock 浏览器 API：模拟 `window`、`document`、`localStorage` 等浏览器对象
-- Mock 函数调用：验证函数是否被正确调用，以及调用参数和次数
-
-**示例说明：**
-
-假设你要测试一个函数，它需要调用 API 获取用户数据：
-
-```javascript
-// 不使用 Mock：需要真实的 API 服务，测试慢且不稳定
-async function getUserData() {
-  const response = await fetch('/api/user') // 真实请求
-  return response.json()
-}
-
-// 使用 Mock：快速、稳定、可控
-jest.mock('fetch', () => jest.fn())
-const mockFetch = require('fetch')
-mockFetch.mockResolvedValue({ data: { name: '测试用户' } })
-```
-
-### 基础 Mock
-
-```javascript
-// 创建一个 Mock 函数
-const mockFn = jest.fn()
-
-// 设置返回值
-mockFn.mockReturnValue(42)
-expect(mockFn()).toBe(42)
-
-// 设置一次返回值
-mockFn.mockReturnValueOnce(1)
-mockFn.mockReturnValueOnce(2)
-expect(mockFn()).toBe(1)
-expect(mockFn()).toBe(2)
-
-// 模拟实现
-mockFn.mockImplementation((x) => x * 2)
-expect(mockFn(5)).toBe(10)
-```
-
-### Mock 模块
-
-```javascript
-// 完全 Mock 一个模块
-jest.mock('./api', () => ({
-  fetchData: jest.fn(() => Promise.resolve({data: 'test'}))
-}))
-
-// 部分 Mock（保留部分原功能）
-jest.mock('./utils', () => ({
-  ...jest.requireActual('./utils'),
-  specificFunction: jest.fn()
-}))
-```
-
-### Mock 外部依赖
-
-```javascript
-// Mock axios
-jest.mock('axios', () => ({
-  get: jest.fn(() => Promise.resolve({data: {}})),
-  post: jest.fn(() => Promise.resolve({data: {}}))
-}))
-
-// Mock React 组件
-jest.mock('../Button', () => {
-  return function MockButton({children}) {
-    return <div data-testid="mock-button">{children}</div>
-  }
-})
-```
-
-### 清理 Mock
-
-```javascript
-beforeEach(() => {
-  // 清理所有 Mock 的调用记录
-  jest.clearAllMocks()
-  
-  // 重置 Mock 实现
-  jest.resetAllMocks()
-  
-  // 恢复原始实现
-  jest.restoreAllMocks()
-})
-```
-
-## 异步测试
-
-### Promise 测试
-
-```javascript
-// 使用 async/await（推荐）
-test('异步获取数据', async () => {
-  const data = await fetchData()
-  expect(data).toEqual({id: 1})
-})
-
-// 使用 .then()
-test('异步获取数据', () => {
-  return fetchData().then(data => {
-    expect(data).toEqual({id: 1})
-  })
-})
-```
-
-### 错误处理测试
-
-```javascript
-test('处理异步错误', async () => {
-  await expect(fetchData()).rejects.toThrow('网络错误')
-  
-  // 或使用 try/catch
-  try {
-    await fetchData()
-  } catch (error) {
-    expect(error.message).toBe('网络错误')
-  }
-})
-```
-
-### 等待 DOM 更新
-
-```javascript
-import { waitFor } from '@testing-library/react'
-
-test('等待元素出现', async () => {
-  render(<Component />)
-  
-  await waitFor(() => {
-    expect(screen.getByText('加载完成')).toBeInTheDocument()
-  })
-})
-```
-
-## 生命周期钩子
-
-### 全局钩子
-
-```javascript
-// 所有测试前执行一次
-beforeAll(() => {
-  // 初始化数据库连接等
-})
-
-// 所有测试后执行一次
-afterAll(() => {
-  // 清理资源
-})
-```
-
-### 每个测试的钩子
-
-```javascript
-describe('测试套件', () => {
-  // 每个测试前执行
-  beforeEach(() => {
-    // 重置状态
-    jest.clearAllMocks()
-  })
-
-  // 每个测试后执行
-  afterEach(() => {
-    // 清理 DOM
-    cleanup()
-  })
-
-  test('测试1', () => {
-    // 测试代码
-  })
-
-  test('测试2', () => {
-    // 测试代码
-  })
-})
-```
-
-## 测试覆盖率
-
-### 查看覆盖率
-
-```bash
-npm test -- --coverage
-```
-
-### 覆盖率指标
-
-- **语句覆盖率**：代码中有多少语句被执行了
-- **分支覆盖率**：有多少 if/else 分支被执行了
-- **函数覆盖率**：有多少函数被调用了
-- **行覆盖率**：有多少行代码被执行了
-
-### 覆盖率配置
-
-在 `package.json` 中配置：
-
-```json
-{
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts",
-      "!src/**/__test__/**"
-    ],
-    "coverageThreshold": {
-      "global": {
-        "branches": 80,
-        "functions": 80,
-        "lines": 80,
-        "statements": 80
-      }
-    }
-  }
-}
-```
-
-## 常见问题
-
-### 1. 如何测试 React 组件？
-
-```javascript
-import { render, screen } from '@testing-library/react'
-import Component from './Component'
-
-test('渲染组件', () => {
-  render(<Component name="测试" />)
-  expect(screen.getByText('测试')).toBeInTheDocument()
-})
-```
-
-### 2. 如何测试用户交互？
-
-```javascript
-import { fireEvent } from '@testing-library/react'
-
-test('点击按钮', () => {
-  render(<Button onClick={handleClick}>点击</Button>)
-  fireEvent.click(screen.getByText('点击'))
-  expect(handleClick).toHaveBeenCalled()
-})
-```
-
-### 3. 如何处理定时器？
-
-```javascript
-// 使用 Jest 的定时器 Mock
-jest.useFakeTimers()
-
-test('定时器测试', () => {
-  const callback = jest.fn()
-  setTimeout(callback, 1000)
-  
-  jest.advanceTimersByTime(1000)
-  expect(callback).toHaveBeenCalled()
-  
-  jest.useRealTimers() // 恢复真实定时器
-})
-```
-
-### 4. 如何跳过测试？
-
-```javascript
-// 跳过单个测试
-test.skip('这个测试被跳过', () => {})
-
-// 跳过整个测试套件
-describe.skip('这个套件被跳过', () => {})
-
-// 条件跳过
-test('条件测试', () => {
-  if (process.env.NODE_ENV === 'production') {
-    return // 跳过
-  }
-  // 测试代码
-})
-```
-
-### 5. 如何只运行特定测试？
-
-```javascript
-// 使用 test.only 或 it.only
-test.only('只运行这个测试', () => {})
-
-// 或使用 describe.only
-describe.only('只运行这个套件', () => {})
-```
-
-## 最佳实践
-
-### 1. 测试命名要清晰
-
-```javascript
-// ✅ 好的命名
-test('当用户点击删除按钮时应该显示确认对话框', () => {})
-
-// ❌ 不好的命名
-test('测试删除', () => {})
-```
-
-### 2. 一个测试只测试一件事
-
-```javascript
-// ✅ 好的做法
-test('应该正确计算总和', () => {
-  expect(sum([1, 2, 3])).toBe(6)
-})
-
-test('应该处理空数组', () => {
-  expect(sum([])).toBe(0)
-})
-
-// ❌ 不好的做法
-test('测试 sum 函数', () => {
-  expect(sum([1, 2, 3])).toBe(6)
-  expect(sum([])).toBe(0)
-  expect(sum([-1, 1])).toBe(0)
-})
-```
-
-### 3. 使用描述性的断言消息
-
-```javascript
-// ✅ 好的做法
-expect(result).toBe(expected, '计算结果应该等于预期值')
-
-// ❌ 不好的做法
-expect(result).toBe(expected)
-```
-
-### 4. 保持测试独立
-
-```javascript
-// ✅ 好的做法：每个测试独立
-beforeEach(() => {
-  jest.clearAllMocks()
-  // 重置状态
-})
-
-// ❌ 不好的做法：测试之间相互依赖
-let sharedState = {}
-```
-
-### 5. 合理使用 Mock
-
-```javascript
-// ✅ 好的做法：只 Mock 外部依赖
-jest.mock('axios')
-jest.mock('../api')
-
-// ❌ 不好的做法：过度 Mock
-jest.mock('./utils') // 如果 utils 是内部工具，不应该 Mock
-```
-
-### 6. 测试边界情况
-
-```javascript
-describe('边界情况', () => {
-  test('应该处理空值', () => {
-    expect(process(null)).toBe(null)
-  })
-
-  test('应该处理空数组', () => {
-    expect(process([])).toEqual([])
-  })
-
-  test('应该处理超大数字', () => {
-    expect(process(Number.MAX_SAFE_INTEGER)).toBeDefined()
-  })
-})
-```
-
-### 7. 使用测试工具函数
-
-```javascript
-// 创建测试数据的工厂函数
-const createUser = (overrides = {}) => ({
-  id: 1,
-  name: '测试用户',
-  email: 'test@example.com',
-  ...overrides
-})
-
-test('测试用户创建', () => {
-  const user = createUser({name: '新用户'})
-  expect(user.name).toBe('新用户')
-})
-```
-
-## 总结
-
-Jest 是一个功能强大且易于使用的测试框架。记住以下要点：
-
-1. **写测试要简单**：一个测试只测试一件事
-2. **命名要清晰**：测试名称要能说明测试的目的
-3. **保持独立**：测试之间不应该相互依赖
-4. **合理 Mock**：只 Mock 外部依赖，不要过度 Mock
-5. **测试边界**：不仅要测试正常情况，也要测试边界和错误情况
-
-更多详细信息，请参考：
-- [Jest 官方文档](https://jestjs.io/docs/getting-started)
-- [React Testing Library](https://testing-library.com/react)
-- [项目测试规范](.cursor/rules/component-jest.mdc)