用途
该技能用于为前端应用构建全面的测试套件，包括单元测试、集成测试和端到端测试，并配合适当的覆盖率与断言。它面向需要为 UI 与集成逻辑建立健壮测试体系的开发场景。
适用场景
根据资料，该技能适用于以下情况：
- 组件测试
- 集成测试
- 端到端测试
- 回归预防
- 质量保证
- 测试驱动开发
主要能力
该技能涉及的前端测试工具包括 Jest、Vitest、React Testing Library 和 Cypress。其参考指南目录包含以下内容：
- Jest Unit Testing (React)：Jest 单元测试（React）
- React Testing Library Integration Tests：React Testing Library 集成测试
- Vitest for Vue Testing：Vitest 用于 Vue 测试
- Cypress E2E Testing：Cypress 端到端测试
- Test Coverage Configuration：测试覆盖率配置
使用方式
资料提供了一个最小可运行示例，展示如何使用 React Testing Library 与 Jest 测试一个 Button 组件：
// Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Button } from './Button';
describe('Button Component', () => {
it('renders button with text', () => {
render(<Button>Click me</Button>);
expect(screen.getByRole('button')).toHaveTextContent('Click me');
});
it('calls onClick handler when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
it('disables button when disabled prop is true', () => {
render(<Button disabled>Click me</Button>);
expect(screen.getByRole('button')).toBeDisabled();
});
it('applies variant styles correctly', () => {
// ... (see reference guides for full implementation)
更详细的实现位于 references/ 目录下的参考指南中。
最佳实践
资料列出了以下应做与不应做的事项：
应做（✅ DO）：
- 遵循既定的模式与约定
- 编写整洁、可维护的代码
- 添加适当的文档
- 部署前进行充分测试
不应做（❌ DON'T）：
- 跳过测试或验证
- 忽略错误处理
- 硬编码配置值
限制
资料未提供关于收费、价格、平台支持范围、具体安装命令或性能效果的信息，这些内容暂未提供。