技能 javascript-testing-patterns
🧪

javascript-testing-patterns

安全

掌握 JavaScript 测试模式

也可从以下获取: wshobson

编写测试很难。这项技能提供了使用 Jest、Vitest 和 Testing Library 进行单元测试、集成测试和端到端测试的成熟模式和示例，让您可以快速构建可靠的测试套件。

支持: Claude Codex Code(CC)
🥉 74 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“javascript-testing-patterns”。 为 add 函数编写单元测试，该函数接收两个数字并返回它们的和

预期结果:

  • ```typescript
  • import { describe, it, expect } from 'vitest';
  • import { add } from './calculator';
  •  
  • describe('add', () => {
  • it('should add two positive numbers', () => {
  • expect(add(2, 3)).toBe(5);
  • });
  •  
  • it('should add negative numbers', () => {
  • expect(add(-2, -3)).toBe(-5);
  • });
  •  
  • it('should handle zero', () => {
  • expect(add(0, 5)).toBe(5);
  • });
  • });
  • ```

正在使用“javascript-testing-patterns”。 为用户表单组件创建测试，该组件验证电子邮件并提交数据

预期结果:

  • ```typescript
  • import { render, screen, fireEvent } from '@testing-library/react';
  • import { describe, it, expect, vi } from 'vitest';
  • import { UserForm } from './UserForm';
  •  
  • describe('UserForm', () => {
  • it('should show validation error for invalid email', () => {
  • render(<UserForm onSubmit={vi.fn()} />);
  • fireEvent.change(screen.getByTestId('email-input'), {
  • target: { value: 'invalid-email' }
  • });
  • fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
  • expect(screen.getByText('Invalid email')).toBeInTheDocument();
  • });
  •  
  • it('should call onSubmit with form data', () => {
  • const onSubmit = vi.fn();
  • render(<UserForm onSubmit={onSubmit} />);
  • fireEvent.change(screen.getByTestId('name-input'), {
  • target: { value: 'John Doe' }
  • });
  • fireEvent.change(screen.getByTestId('email-input'), {
  • target: { value: 'john@example.com' }
  • });
  • fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
  • expect(onSubmit).toHaveBeenCalledWith({
  • name: 'John Doe',
  • email: 'john@example.com'
  • });
  • });
  • });
  • ```

安全审计

安全
v1 • 2/25/2026

All 145 static findings are false positives. The detected patterns exist only in code examples within markdown documentation files, not in executable code. The skill provides educational content about testing patterns with code samples demonstrating legitimate testing practices including mock setup, API testing, email service testing, and database integration testing. No executable code, no security risks.

2
已扫描文件
1,063
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
91
规范符合性

你能构建什么

新项目测试设置

从头开始建立测试基础设施的 JavaScript/TypeScript 开发者，需要正确的框架配置、目录结构和 CI/CD 集成。

为现有代码库添加测试

维护遗留或未测试应用的团队，需要在不破坏现有功能的情况下，逐步为现有函数、API 和组件引入测试。

提高测试覆盖率

希望提高代码覆盖率和测试质量的开发者，学习高级模拟模式、夹具工厂和集成测试策略。

试试这些提示

基本单元测试 
为 [描述函数功能] 的函数编写单元测试。包括成功用例和错误处理的测试。
使用 Testing Library 的组件测试 
为 [描述组件行为] 的组件创建 React Testing Library 测试。测试用户交互、表单提交和错误状态。
API 集成测试 
为 [描述端点功能] 的 REST API 端点编写集成测试。使用 supertest 包含数据库设置、身份验证和清理。
模拟外部依赖 
为 [服务/类] 创建测试，模拟外部依赖包括 [列出依赖]。使用依赖注入和 vi.mock 模式。

最佳实践

  • 在每个测试中遵循 Arrange-Act-Assert（AAA）模式，以获得清晰的结构和可读性
  • 测试行为和用户交互而非实现细节，使测试能够适应重构
  • 使用 beforeEach 和 afterEach 钩子进行设置和清理，保持测试隔离并防止污染

避免

  • 测试实现细节（如内部函数调用或组件状态）而非可观察的行为
  • 编写脆弱的测试，在代码重构但行为保持不变时测试会失败
  • 创建过于复杂的测试设置，使用太多模拟，使测试难以理解和维护

常见问题

我应该使用 Jest 还是 Vitest？
Vitest 更快，与 Vite 项目配合更好。Jest 更成熟，采用更广泛。如果使用 Vite 请选择 Vitest，否则 Jest 是安全的选择。
如何测试使用外部 API 的代码？
使用 vi.mock() 或依赖注入模拟外部 API 调用。这使测试保持快速、可靠且独立于外部服务。
我应该以什么测试覆盖率为目标？
一般目标是 80% 覆盖率。专注于覆盖关键业务逻辑和错误路径，而不是追求 100% 覆盖率。
我应该测试私有方法吗？
不需要。仅测试公共行为。如果需要测试私有方法，请考虑将它们重构为独立的可测试单元。
如何处理数据库测试？
使用单独的测试数据库，并在 beforeEach 中清理测试间的数据。考虑使用事务进行更快的回滚，而不是截断表。
单元测试和集成测试有什么区别？
单元测试隔离单个函数或类。集成测试验证多个组件（包括数据库和 API）协同工作。

开发者详情

作者

sickn33

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/javascript-testing-patterns

引用

main

文件结构

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md