Back to Details

javascript-typescript-jest

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Test Structure

测试结构

  • Name test files with 
    .test.ts
    or 
    .test.js
    suffix
  • Place test files next to the code they test or in a dedicated 
    __tests__
    directory
  • Use descriptive test names that explain the expected behavior
  • Use nested describe blocks to organize related tests
  • Follow the pattern: 
    describe('Component/Function/Class', () => { it('should do something', () => {}) })
  • 测试文件使用
    .test.ts
    或
    .test.js
    后缀命名
  • 将测试文件放在其对应的代码旁边，或者放在专门的
    __tests__
    目录中
  • 使用描述性的测试名称，说明预期行为
  • 使用嵌套的describe块来组织相关测试
  • 遵循以下模式：
    describe('Component/Function/Class', () => { it('should do something', () => {}) })

Effective Mocking

高效模拟

  • Mock external dependencies (APIs, databases, etc.) to isolate your tests
  • Use 
    jest.mock()
    for module-level mocks
  • Use 
    jest.spyOn()
    for specific function mocks
  • Use 
    mockImplementation()
    or 
    mockReturnValue()
    to define mock behavior
  • Reset mocks between tests with 
    jest.resetAllMocks()
    in 
    afterEach
  • 模拟外部依赖（API、数据库等）以隔离测试
  • 使用
    jest.mock()
    进行模块级模拟
  • 使用
    jest.spyOn()
    进行特定函数模拟
  • 使用
    mockImplementation()
    或
    mockReturnValue()
    定义模拟行为
  • 在
    afterEach
    中使用
    jest.resetAllMocks()
    在测试之间重置模拟

Testing Async Code

异步代码测试

  • Always return promises or use async/await syntax in tests
  • Use 
    resolves
    /
    rejects
    matchers for promises
  • Set appropriate timeouts for slow tests with 
    jest.setTimeout()
  • 在测试中始终返回Promise或使用async/await语法
  • 对Promise使用
    resolves
    /
    rejects
    匹配器
  • 使用
    jest.setTimeout()
    为慢测试设置适当的超时时间

Snapshot Testing

快照测试

  • Use snapshot tests for UI components or complex objects that change infrequently
  • Keep snapshots small and focused
  • Review snapshot changes carefully before committing
  • 对UI组件或不常变化的复杂对象使用快照测试
  • 保持快照小巧且聚焦
  • 在提交前仔细检查快照的变化

Testing React Components

React组件测试

  • Use React Testing Library over Enzyme for testing components
  • Test user behavior and component accessibility
  • Query elements by accessibility roles, labels, or text content
  • Use 
    userEvent
    over 
    fireEvent
    for more realistic user interactions
  • 使用React Testing Library而非Enzyme来测试组件
  • 测试用户行为和组件可访问性
  • 通过可访问性角色、标签或文本内容查询元素
  • 使用
    userEvent
    而非
    fireEvent
    来实现更真实的用户交互

Common Jest Matchers

常用Jest匹配器

  • Basic: 
    expect(value).toBe(expected)
    , 
    expect(value).toEqual(expected)
  • Truthiness: 
    expect(value).toBeTruthy()
    , 
    expect(value).toBeFalsy()
  • Numbers: 
    expect(value).toBeGreaterThan(3)
    , 
    expect(value).toBeLessThanOrEqual(3)
  • Strings: 
    expect(value).toMatch(/pattern/)
    , 
    expect(value).toContain('substring')
  • Arrays: 
    expect(array).toContain(item)
    , 
    expect(array).toHaveLength(3)
  • Objects: 
    expect(object).toHaveProperty('key', value)
  • Exceptions: 
    expect(fn).toThrow()
    , 
    expect(fn).toThrow(Error)
  • Mock functions: 
    expect(mockFn).toHaveBeenCalled()
    , 
    expect(mockFn).toHaveBeenCalledWith(arg1, arg2)
  • 基础：
    expect(value).toBe(expected)
    , 
    expect(value).toEqual(expected)
  • 真值判断：
    expect(value).toBeTruthy()
    , 
    expect(value).toBeFalsy()
  • 数字：
    expect(value).toBeGreaterThan(3)
    , 
    expect(value).toBeLessThanOrEqual(3)
  • 字符串：
    expect(value).toMatch(/pattern/)
    , 
    expect(value).toContain('substring')
  • 数组：
    expect(array).toContain(item)
    , 
    expect(array).toHaveLength(3)
  • 对象：
    expect(object).toHaveProperty('key', value)
  • 异常：
    expect(fn).toThrow()
    , 
    expect(fn).toThrow(Error)
  • 模拟函数：
    expect(mockFn).toHaveBeenCalled()
    , 
    expect(mockFn).toHaveBeenCalledWith(arg1, arg2)