mcpField
J
javascript-typescript-jest

javascript-typescript-jest

github.com/github测试与质量40.5k13.2k 次安装1 天前更新
代码仓库

关于 javascript-typescript-jest

这项技能提供使用 Jest 编写 JavaScript 和 TypeScript 测试的实用指南，涵盖测试组织、模拟、异步代码、快照和 React 组件。

主要功能

  1. 01测试文件组织
  2. 02依赖项模拟
  3. 03异步测试模式
  4. 04快照测试
  5. 05React 组件测试
  6. 06常用 Jest 匹配器

适用场景

  1. 01组织 Jest 测试套件
  2. 02隔离外部依赖
  3. 03测试 Promise 与异步行为
  4. 04检查 React 用户交互

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/github/awesome-copilot --skill javascript-typescript-jest

安装后在 Claude Code 中输入/javascript-typescript-jest确认已加载。

详细介绍

测试结构
  • 测试文件以 .test.ts 或 .test.js 后缀命名
  • 将测试文件放在被测代码旁边，或放在专门的 __tests__ 目录中
  • 使用能够说明预期行为的描述性测试名称
  • 使用嵌套的 describe 块来组织相关测试
  • 遵循以下模式：describe('Component/Function/Class', () => { it('should do something', () => {}) })
有效 Mock
  • Mock 外部依赖（API、数据库等），以隔离你的测试
  • 使用 jest.mock() 进行模块级 Mock
  • 使用 jest.spyOn() 对特定函数进行 Mock
  • 使用 mockImplementation() 或 mockReturnValue() 定义 Mock 行为
  • 在 afterEach 中使用 jest.resetAllMocks() 在测试之间重置 Mock
测试异步代码
  • 在测试中始终返回 promise 或使用 async/await 语法
  • 对 promise 使用 resolves/rejects 匹配器
  • 使用 jest.setTimeout() 为慢速测试设置适当的超时时间
快照测试
  • 对不常变更的 UI 组件或复杂对象使用快照测试
  • 保持快照小巧且聚焦
  • 在提交前仔细审查快照变更
测试 React 组件
  • 测试组件时使用 React Testing Library，而不是 Enzyme
  • 测试用户行为和组件可访问性
  • 通过可访问性角色、标签或文本内容查询元素
  • 使用 userEvent 而不是 fireEvent，以实现更真实的用户交互

常用 Jest 匹配器

  • 基础：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)
  • Mock 函数：expect(mockFn).toHaveBeenCalled()、expect(mockFn).toHaveBeenCalledWith(arg1, arg2)

评论

支持 Markdown