# 测试和质量保证技能 ## 概述此技能可帮助您使用 Playwright 进行 E2E 测试、Jest 进行单元测试以及 React 测试库进行组件测试，为 Next.js 应用程序编写全面的测试。 ## 测试理念 ### 测试金字塔 1. **E2E 测试 (10%)**：关键用户旅程 2. **集成测试（30%）**：组件交互 3. **单元测试 (60%)**：单独的功能和实用程序 ### 测试什么 * **DO** ：测试行为，而不是实现 * **DO** ：测试用户交互和结果 * **DO** ：测试错误状态和边缘情况 * **DO** ：测试可访问性 * **不要**：测试内部实现细节 * **不要**：测试第三方库 * **不要**：过度测试简单的演示组件 ## 剧作家 E2E 测试 ### 设置 // playwright.config.ts 从“@playwright/test”导入{defineConfig，设备} 导出默认的defineConfig({ 测试目录: './e2e', 完全并行：正确，禁止仅：!!process.env.CI，重试：process.env.CI？ 2：0，工人：process.env.CI？ 1：未定义，记者：'html', 使用：{ baseURL: 'http://localhost:3000', 跟踪：“第一次重试时”，屏幕截图：“仅在失败时”， }, 项目：[ { 名称：“铬”，使用：{ ...devices['桌面 Chrome'] }, }, { name: '移动 Chrome', 使用：{ ...devices['Pixel 5'] }, }, ], 网络服务器：{ 命令：'npm run dev'， url: 'http://localhost:3000', 重用现有服务器：！process.env.CI， }, }) ### 基本E2E测试 // e2e/auth.spec.ts 从“@playwright/test”导入{测试，期望} test.describe('身份验证', () => { test('应该注册新用户', async ({ page }) => { 等待 page.goto('/signup') // 填写表格等待 page.fill('input[name="email"]', 'test@example.com') 等待页面.fill（'输入[名称=“密码”]'，'密码123'）等待页面.fill（'输入[名称=“确认密码”]'，'密码123'） // 提交等待 page.click('按钮[type="提交"]') // 验证重定向到仪表板等待期望（页面）.toHaveURL（'/仪表板'） // 验证欢迎消息等待期望（page.getByText（'欢迎'））.toBeVisible（） }) test('应该显示无效凭据的错误', async ({ page }) => { 等待 page.goto('/login') 等待 page.fill('input[name="email"]', 'wrong@example.com') 等待页面.fill（'输入[名称=“密码”]'，'错误密码'）等待 page.click('按钮[type="提交"]') // 验证错误信息等待期望（page.getByText（'无效的凭据'））.toBeVisible（） }) }) ### 高级剧作家模式 // 页面对象模型 // e2e/pages/login.page.ts 导出类登录页面{ 构造函数（私有页面：页面）{} 异步转到（）{ 等待 this.page.goto('/login') } 异步登录（电子邮件：字符串，密码：字符串）{ 等待 this.page.fill('input[name="email"]', email) 等待 this.page.fill('输入[名称=“密码”]', 密码) 等待 this.page.click('button[type="submit"]') } 异步 getErrorMessage() { return wait this.page.locator('[role="alert"]').textContent() } } // 用法 test('使用页面对象登录', async ({ page }) => { const LoginPage = new LoginPage(页面) 等待登录页面.goto() 等待登录页面.login('test@example.com', '密码') 等待期望（页面）.toHaveURL（'/仪表板'） }) // 已验证状态的固定装置 // e2e/fixtures.ts 导出 const test = base.extend<{authentiatedPage: 页面 }>({ authentiatedPage: async ({ page }, use) => { // 登录等待 page.goto('/login') 等待 page.fill('input[name="email"]', 'test@example.com') 等待页面.fill（'输入[名称=“密码”]'，'密码'）等待 page.click('按钮[type="提交"]') 等待 page.waitForURL('/dashboard') 等待使用（页面） }, }) // 用法测试（'仪表板测试'，async（{authentiatedPage}）=> { 等待authentiatedPage.goto('/仪表板') // 测试验证功能 }) ### 常见的剧作家模式 // 等待网络等待 page.waitForResponse(resp => resp.url().includes('/api/items')) // 测试文件上传等待 page.setInputFiles('input[type="file"]', 'path/to/file.jpg') // 测试下载 const downloadPromise = page.waitForEvent('下载') 等待 page.click('button:has-text("下载")') const download = 等待 downloadPromise 等待 download.saveAs('/path/to/save') // 模拟 API 响应等待 page.route('**/api/items', 路线 => { 路线.履行({ 状态：200， body: JSON.stringify({ items: [] }), }) }) // 调试截图等待 page.screenshot({ 路径: 'debug.png', fullPage: true }) // 测试响应式设计 wait page.setViewportSize({ width: 375, height: 667 }) // iPhone 尺寸 // 测试可访问性 constaccessibilityScanResults=awaitnewAxeBuilder({page}).analyze() 期望（accessibilityScanResults.violations）.toEqual（[]） ## 组件测试 ### 设置 React 测试库 // jest.config.js 模块. 导出 = { 预设：'ts-jest'，测试环境：'jsdom'， setupFilesAfterEnv: ['/jest.setup.js'], 模块名称映射器：{ '^@/(.*)$': '<根目录>/src/$1', }, } // jest.setup.js 导入“@testing-library/jest-dom” ### 基本组件测试 // 组件/button.test.tsx 从 '@testing-library/react' 导入 { render, screen, fireEvent } 从 './button' 导入 { Button } 描述('按钮', () => { it('用文本渲染', () => { 渲染（<按钮>点击我） Expect(screen.getByText('点击我')).toBeInTheDocument() }) it('点击时调用 onClick', () => { const handleClick = jest.fn() 渲染（） fireEvent.click(screen.getByText('点击我')) 期望（handleClick）.toHaveBeenCalledTimes（1） }) it('当disabled属性为true时被禁用', () => { 渲染（<按钮已禁用>点击我） Expect(screen.getByText('点击我')).toBeDisabled() }) it('应用变体样式', () => { 渲染（<按钮变体=“破坏性”>删除） const 按钮 = screen.getByText('删除') 期望（按钮）.toHaveClass（'bg-red-600'） }) }) ### 测试异步组件 // 组件/user-profile.test.tsx 从 '@testing-library/react' 导入 { render, screen, waitFor } 从 './user-profile' 导入 { UserProfile } // 模拟获取 global.fetch = jest.fn() 描述('用户资料', () => { 之前（（）=> { jest.clearAllMocks() }) it('最初显示加载状态', () => { （获取为 jest.Mock）.mockImplementation(() => new Promise(() => {}) // 永远不会解析）渲染（） Expect(screen.getByText('正在加载...')).toBeInTheDocument() }) it('加载时显示用户数据', async () => { （作为 jest.Mock 获取）.mockResolvedValueOnce({ 好的：是的， json: async () => ({ name: 'John Doe', email: 'john@example.com' }), }) 渲染（）等待 waitFor(() => { Expect(screen.getByText('John Doe')).toBeInTheDocument() Expect(screen.getByText('john@example.com')).toBeInTheDocument() }) }) it('fetch 失败时显示错误信息', async () => { (作为 jest.Mock 获取).mockRejectedValueOnce(new Error('获取失败')) 渲染（）等待 waitFor(() => { Expect(screen.getByText('加载用户时出错')).toBeInTheDocument() }) }) }) ### 测试表格 // 组件/contact-form.test.tsx 从 '@testing-library/react' 导入 { render, screen, fireEvent, waitFor } 从“@testing-library/user-event”导入用户事件从 './contact-form' 导入 { ContactForm } 描述（'联系表格'，（）=> { it('验证必填字段', async () => { 渲染（） const SubmitButton = screen.getByText('提交') fireEvent.click(提交按钮) 等待 waitFor(() => { Expect(screen.getByText('需要电子邮件')).toBeInTheDocument() Expect(screen.getByText('需要消息')).toBeInTheDocument() }) }) it('提交包含有效数据的表单', async () => { const 用户 = userEvent.setup() const onSubmit = jest.fn() 渲染（）等待 user.type(screen.getByLabelText('Email'), 'test@example.com') wait user.type(screen.getByLabelText('消息'), '测试消息') 等待 user.click(screen.getByText('提交')) 等待 waitFor(() => { 期望（onSubmit）。toHaveBeenCalledWith（{ 电子邮件：'test@example.com'， message: '测试消息', }) }) }) it('提交时禁用提交按钮', async () => { const 用户 = userEvent.setup() 渲染（）等待 user.type(screen.getByLabelText('Email'), 'test@example.com') wait user.type(screen.getByLabelText('消息'), '测试消息') const SubmitButton = screen.getByText('提交') 等待用户单击（提交按钮）期望（提交按钮）.toBeDisabled（） }) }) ### 测试钩子 // 钩子/use-counter.test.ts 从 '@testing-library/react' 导入 { renderHook, act } 从 './use-counter' 导入 { useCounter } 描述('useCounter', () => { it('使用默认值初始化', () => { const { 结果 } = renderHook(() => useCounter()) 期望(结果.当前.计数).toBe(0) }) it('用自定义值初始化', () => { const { 结果 } = renderHook(() => useCounter(10)) 期望(结果.当前.计数).toBe(10) }) it('增量计数', () => { const { 结果 } = renderHook(() => useCounter()) 行动（（）=> { result.current.increment() }) 期望(结果.当前.计数).toBe(1) }) it('递减计数', () => { const { 结果 } = renderHook(() => useCounter(5)) 行动（（）=> { result.current.decrement() }) 期望(结果.当前.计数).toBe(4) }) it('重置计数', () => { const { 结果 } = renderHook(() => useCounter(10)) 行动（（）=> { result.current.reset() }) 期望(结果.当前.计数).toBe(10) }) }) ## 单元测试 ### 测试实用程序 // lib/utils.test.ts 从 './utils' 导入 { formatDate, slugify, truncate } 描述（'格式日期'，（）=> { it('正确格式化日期', () => { const 日期 = 新日期('2024-01-15') Expect(formatDate(date)).toBe('2024 年 1 月 15 日') }) it('处理无效日期', () => { Expect(formatDate(new Date('无效'))).toBe('无效日期') }) }) 描述('slugify', () => { it('将字符串转换为段', () => { Expect(slugify('Hello World')).toBe('hello-world') Expect(slugify('Next.js 应用程序！')).toBe('next-js-app') }) it('删除特殊字符', () => { 期望(slugify('测试@#$%')).toBe('测试') }) }) 描述（'截断'，（）=> { it('截断长字符串', () => { const text = '这是一个很长的文本' Expect(truncate(text, 10)).toBe('这是一个...') }) it('不截断短字符串', () => { const 文本 = '短' 期望（截断（文本，10））.toBe（'短'） }) }) ### 测试 API 路由 // 应用程序/api/items/route.test.ts 从 './route' 导入 { GET, POST } 从 'next/server' 导入 { NextRequest } 描述('/api/items', () => { 描述('GET', () => { it('返回物品', async () => { const request = new NextRequest('http://localhost:3000/api/items') const 响应 = 等待 GET(请求) const data = 等待response.json() 期望（响应.状态）.toBe（200）期望（data.items）.toBeDefined（） Expect(Array.isArray(data.items)).toBe(true) }) }) 描述('POST', () => { it('创建新项目', async () => { const request = new NextRequest('http://localhost:3000/api/items', { 方法：'POST'， body: JSON.stringify({ title: '测试项目' }), }) const 响应 = 等待 POST(请求) const data = 等待response.json() 期望（响应.状态）.toBe（201）期望（data.item）.toBeDefined（） Expect(data.item.title).toBe('测试项目') }) it('验证必填字段', async () => { const request = new NextRequest('http://localhost:3000/api/items', { 方法：'POST'，正文：JSON.stringify({}), }) const 响应 = 等待 POST(请求) 期望（响应.状态）.toBe（400） }) }) }) ## 嘲笑 ### 模拟 Supabase // __mocks__/supabase.ts 导出 const createClient = jest.fn(() => ({ 来自： jest.fn(() => ({ 选择：jest.fn().mockReturnThis(), 插入：jest.fn().mockReturnThis(), 更新：jest.fn().mockReturnThis()，删除：jest.fn().mockReturnThis(), eq: jest.fn().mockReturnThis(), single: jest.fn().mockResolvedValue({ 数据：{ id：'1'，标题：'测试'}，错误：空， }), }）），授权：{ getUser: jest.fn().mockResolvedValue({ 数据：{ 用户：{ id：'123'，电子邮件：'test@example.com' } }，错误：空， }), }, }）） ### 模拟 Next.js 路由器 // 模拟 useRouter jest.mock('下一个/导航', () => ({ 使用路由器：（）=>（{ 推：jest.fn(), 替换：jest.fn(), 返回： jest.fn(), 转发：jest.fn(), 刷新：jest.fn(), 预取：jest.fn(), }), usePathname: () => '/test-path', useSearchParams: () => new URLSearchParams(), }）） ### 模拟外部 API // 使用MSW（模拟服务工作者）从“msw”导入{rest} 从 'msw/node' 导入 { setupServer } 常量服务器 = setupServer( rest.get('/api/items', (req, res, ctx) => { return res( ctx.json({ 项目：[ { id: '1', 标题: '商品 1' }, { id: '2', 标题: '项目 2' }, ], }) ） }) ） beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) ## 测试清单 ### E2E 测试 * 测试关键用户旅程（注册、登录、结账） * 在多个浏览器上测试 * 在移动视口上测试 * 测试错误状态 * 使用慢速网络进行测试 * 使用禁用的 JavaScript 进行测试（如果适用） * 测试可访问性 ### 组件测试 * 测试渲染 * 测试用户交互 * 测试道具 * 测试条件渲染 * 测试错误状态 * 测试加载状态 * 测试可访问性 ### 单元测试 * 测试纯函数 * 测试边缘情况 * 测试错误处理 * 使用不同的输入进行测试 * 测试边界条件 ## 常见测试模式 ### 测试 ID 以进行可靠选择 // 组件 // Test const Button = screen.getByTestId('提交按钮') ### 可访问的查询（首选） // 按角色（最佳） screen.getByRole('按钮', { name: /submit/i }) // By label screen.getByLabelText('电子邮件') // By text screen.getByText('欢迎') // By placeholder screen.getByPlaceholderText('输入电子邮件') ### 测试加载状态 it('显示加载内容', async () => { 渲染（<组件/>） // 加载状态 Expect(screen.getByText('正在加载...')).toBeInTheDocument() // 等待内容等待 waitFor(() => { Expect(screen.getByText('Content')).toBeInTheDocument() Expect(screen.queryByText('正在加载...')).not.toBeInTheDocument() }) }) ### 测试误差边界 it('在错误时呈现错误边界', () => { const sp = jest.spyOn(console, 'error').mockImplementation() 渲染（ <抛出组件/> ） Expect(screen.getByText('出了点问题')).toBeInTheDocument() 间谍.mockRestore() }) ## Debugging Tests ### Debug Output 从“@testing-library/react”导入{屏幕，渲染} // 打印组件树渲染（<组件/>）屏幕.调试() // 打印特定元素 screen.debug(screen.getByRole('按钮')) ### 剧作家调试 # 使用浏览器以调试模式运行 npx 剧作家测试--debug # 运行特定测试 npx 剧作家测试 auth.spec.ts --debug # 使用带头浏览器运行 npx 剧作家测试--headed ### 常见问题 **未找到元素：** * 检查元素是否存在： `screen.getByText` 与 `screen.queryByText` * 对异步元素使用 `findBy`：`screen.findByText` * 检查可访问性树：`screen.debug()` **时间问题：** * 使用`waitFor`进行异步更新 * 使用`findBy`查询（内置等待） * 如果需要增加超时时间 **未反映状态更新：** * 如果手动更新状态，则包含在 `act()` 中 * 使用 `userEvent` 而不是 `fireEvent` 来获得更真实的事件 ## 性能测试 // 灯塔 CI // lighthouserc.js 模块. 导出 = { ci：{ 收集：{ url: ['http://localhost:3000/'], 运行次数：3， }, 断言：{ 断言：{ '类别：性能'：['错误'，{ minScore：0.9 }]， '类别：可访问性'：['错误'，{ minScore：0.9 }]， '类别：最佳实践'：['错误'，{ minScore：0.9 }]， '类别：seo'：['错误'，{ minScore：0.9 }]， }, }, }, } ## 何时使用此技能在以下情况下调用该技能： * 编写新的测试 * 调试测试失败 * 建立测试基础设施 * 测试特定场景（表单、异步、身份验证） * 实施E2E测试 * 测试可访问性 * 模拟依赖关系 * 提高测试覆盖率

测试质量保证

包含技能