# Jest 反应测试使用 Jest 和 React 测试库测试 React 应用程序的综合技能。这项技能涵盖了从基本组件测试到高级模式的所有内容，包括模拟、异步测试、自定义挂钩测试和集成测试策略。 ## 何时使用此技能在以下情况下使用此技能： * 使用 Jest 和 React 测试库测试 React 组件 * 为 React 项目设置 Jest 配置 * 为组件、挂钩和实用程序编写单元测试 * 测试用户交互和组件行为 * 模拟模块、函数、API 调用和外部依赖项 * 测试异步操作（API 调用、计时器、promise） * 测试自定义React钩子 * 为复杂的组件树编写集成测试 * 调试失败的测试或提高测试覆盖率 * 遵循测试最佳实践和模式 ## 核心概念 ### 测试理念 React 测试库遵循以下指导原则： * **测试用户行为，而不是实现**：编写类似于用户与应用程序交互方式的测试 * **可访问性优先** ：使用提升可访问组件的查询（getByRole、getByLabelText） * **避免测试实现细节** ：不要直接测试状态、道具或内部方法 * **可维护的测试** ：测试应该在行为改变时中断，而不是在代码重构时中断 * **置信度高于覆盖率**：专注于提供置信度的测试，而不是 100% 覆盖率 ### 关键测试概念 1. **Queries** ：查找元素的方法（getBy、queryBy、findBy） 2. **用户事件**：模拟用户交互（单击、键入、选择） 3. **异步测试**：使用异步操作测试组件 4. **模拟**：用受控测试替身替换依赖项 5. **断言**：使用匹配器验证预期结果 ## 笑话配置 ### 基本 Jest 配置 **jest.config.js**（JavaScript 项目）： /** @type {import('jest').Config} */ 常量配置= { // DOM测试的测试环境测试环境：'jsdom'， // 环境后设置文件 setupFilesAfterEnv: ['/src/setupTests.js'], // 模块路径 moduleDirectories: ['node_modules', 'src'], // 使用 babel-jest 转换文件变换：{ '^.+\\.(js|jsx)$': 'babel-jest', }, // 静态资源和 CSS 的模块名称映射器模块名称映射器：{ '\\.(css|less|scss|sass)$': '身份-obj-代理', '\\.(jpg|jpeg|png|gif|svg)$': '/__mocks__/fileMock.js', }, // 覆盖配置收集覆盖范围：[ 'src/**/*.{js,jsx}', '!src/index.js', '!src/**/*.test.{js,jsx}', '!src/**/__tests__/**', ], // 覆盖阈值覆盖阈值：{ 全局：{ 分支机构：80个，功能：80，线路：80，陈述：80， }, }, }; module.exports = 配置； **jest.config.js**（TypeScript 项目）：从 'jest' 导入类型 {Config}；常量配置：配置= { 预设：'ts-jest'，测试环境：'jsdom'， setupFilesAfterEnv: ['/src/setupTests.ts'], moduleDirectories: ['node_modules', 'src'], 变换：{ '^.+\\.tsx?$': 'ts-jest', }, 模块名称映射器：{ '\\.(css|less|scss|sass)$': '身份-obj-代理', '\\.(jpg|jpeg|png|gif|svg)$': '/__mocks__/fileMock.ts', '^@/(.*)$': '<根目录>/src/$1', }, 收集覆盖范围：[ 'src/**/*.{ts,tsx}', '!src/index.tsx', '!src/**/*.test.{ts,tsx}', '!src/**/__tests__/**', '!src/**/*.d.ts', ], 覆盖阈值：{ 全局：{ 分支机构：80个，功能：80，线路：80，陈述：80， }, }, }; 导出默认配置； ### 设置文件 **src/setupTests.js**： // 从 jest-dom 添加自定义笑话匹配器导入“@testing-library/jest-dom”； // 使用笑话扩展匹配器扩展expect（可选）从 'jest-extend' 导入 * 作为匹配器；期望.扩展（匹配器）； // 模拟 window.matchMedia Object.defineProperty(窗口, 'matchMedia', { 可写：真实，值： jest.fn().mockImplementation(query => ({ 匹配：假，媒体：查询， onchange：空，添加监听器：jest.fn(), 移除监听器：jest.fn(), addEventListener: jest.fn(), 删除事件监听器：jest.fn(), 调度事件：jest.fn(), }））， }); // 模拟 IntersectionObserver global.IntersectionObserver = 类 IntersectionObserver { 构造函数（）{} 断开连接（）{} 观察（）{} 采取记录（）{ 返回[]； } 取消观察（）{} }; // 抑制测试中的控制台错误（可选） const OriginalError = console.error; 之前所有（（）=> { console.error = (...args) => { 如果（ typeof args[0] === '字符串' && args[0].includes('警告：ReactDOM.render') ）{ 返回； } 原始错误.call（控制台，...args）； }; }); 毕竟（（）=> { console.error = 原始错误； }); // 每次测试后重置模拟每个之后（（）=> { jest.clearAllMocks(); }); ### 文件模拟 **模拟** /fileMock.js**： module.exports = '测试文件存根'; **模拟** /styleMock.js**：模块.exports = {}; ## React 测试库查询 ### 查询类型 React 测试库提供了三种类型的查询： 1. **getBy** ：返回元素或抛出错误（用于应该存在的元素） 2. **queryBy** ：返回元素或null（用于可能不存在的元素） 3. **findBy** ：返回解析为元素的承诺（用于异步元素） ### 查询优先级 **推荐的查询顺序**（注重可访问性）： 1. **getByRole** ：最容易访问的查询 getByRole('按钮', { 名称: /submit/i }) getByRole('标题', { 级别: 1 }) getByRole('文本框', { 名称: /用户名/i }) 2. **getByLabelText** ：适用于带有标签的表单字段 getByLabelText(/电子邮件地址/i) getByLabelText('密码') 3. **getByPlaceholderText** ：对于带有占位符的输入 getByPlaceholderText(/搜索/i) 4. **getByText** ：对于带有文本的非交互式元素 getByText(/欢迎/我) getByText('错误：凭据无效') 5. **getByDisplayValue** ：对于带有值的表单元素 getByDisplayValue('约翰·多伊') 6. **getByAltText** ：对于带有替代文本的图像 getByAltText(/个人资料图片/i) 7. **getByTitle** ：对于有 title 属性的元素 getByTitle(/关闭/i) 8. **getByTestId** ：其他查询不起作用时的最后手段 getByTestId('自定义元素') ### 查询变体 // 单元素查询 screen.getByRole('button') // 如果未找到或找到多个则抛出异常 screen.queryByRole('button') // 如果没有找到则返回 null wait screen.findByRole('button') // 异步，最多等待 1000 毫秒 // 多元素查询 screen.getAllByRole('listitem') // 如果没有找到则抛出异常 screen.queryAllByRole('listitem') // 如果没有找到则返回 [] wait screen.findAllByRole('listitem') // 异步版本 ## 组件测试策略 ### 基本组件测试从'@testing-library/react'导入{渲染，屏幕}；从'./Greeting'导入{问候语}；描述('问候语组件', () => { it('呈现问候语', () => { render(); Expect(screen.getByText(/hello, alice/i)).toBeInTheDocument(); }); it('未提供名称时呈现默认问候语', () => { 渲染（<问候语/>）； Expect(screen.getByText(/hello, guest/i)).toBeInTheDocument(); }); }); ### 测试用户交互从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从 './Counter' 导入 { Counter } ；描述('计数器组件', () => { it('点击按钮时增加计数器', async () => { const user = userEvent.setup(); 渲染（<计数器/>）； const button = screen.getByRole('button', { name: /increment/i }); const count = screen.getByText(/count: 0/i); 期望（计数）.toBeInTheDocument（）；等待用户点击（按钮）； Expect(screen.getByText(/count: 1/i)).toBeInTheDocument(); }); it('点击按钮时减少计数器', async () => { const user = userEvent.setup(); render(<计数器initialCount={5} />); const decrementBtn = screen.getByRole('button', { name: /decrement/i }); 等待用户.click(decrementBtn); Expect(screen.getByText(/count: 4/i)).toBeInTheDocument(); }); }); ### 测试表格从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从 './LoginForm' 导入 { LoginForm }; 描述('登录表单组件', () => { it('使用用户名和密码提交表单', async () => { const user = userEvent.setup(); const handleSubmit = jest.fn(); 渲染(); const usernameInput = screen.getByLabelText(/用户名/i); const passwordInput = screen.getByLabelText(/password/i); const SubmitButton = screen.getByRole('button', { name: /submit/i }); 等待 user.type(usernameInput, 'testuser'); 等待 user.type(passwordInput, 'password123'); 等待用户点击（提交按钮）；期望（handleSubmit）.toHaveBeenCalledTimes（1）；期望（handleSubmit）.toHaveBeenCalledWith（{ 用户名：'测试用户'，密码：'密码123', }); }); it('显示空字段的验证错误', async () => { const user = userEvent.setup(); 渲染(); const SubmitButton = screen.getByRole('button', { name: /submit/i }); 等待用户点击（提交按钮）； Expect(screen.getByText(/需要用户名/i)).toBeInTheDocument(); Expect(screen.getByText(/需要密码/i)).toBeInTheDocument(); }); }); ### 测试条件渲染从'@testing-library/react'导入{渲染，屏幕}；从 './UserProfile' 导入 { UserProfile }；描述('用户配置文件组件', () => { it('加载时显示加载状态', () => { 渲染（）; 期望(screen.getByText(/loading/i)).toBeInTheDocument(); Expect(screen.queryByRole('heading')).not.toBeInTheDocument(); }); it('加载时显示用户数据', () => { 常量用户 = { 名称：“约翰·多伊”，电子邮件：'john@example.com'， }; 渲染（）; 期望(screen.queryByText(/loading/i)).not.toBeInTheDocument(); Expect(screen.getByRole('heading', { name: /john doe/i })).toBeInTheDocument(); 期望(screen.getByText(/john@example.com/i)).toBeInTheDocument(); }); it('发生错误时显示错误信息', () => { render(); Expect(screen.getByText(/无法加载用户/i)).toBeInTheDocument(); Expect(screen.queryByRole('heading')).not.toBeInTheDocument(); }); }); ## 模拟模式 ### 模拟模块 **自动模拟**： // __mocks__/axios.js 导出默认值{ 得到：jest.fn(), 帖子：jest.fn(), 把: jest.fn(), 删除：jest.fn(), }; **测试中的用法**：从 'axios' 导入 axios；从 './UserService' 导入 { UserService }； jest.mock('axios'); 描述（'用户服务'，（）=> { 之前（（）=> { jest.clearAllMocks(); }); it('获取用户成功', async () => { const mockUsers = [{ id: 1, name: 'Alice' }]; axios.get.mockResolvedValue({ 数据：mockUsers }); const 用户 = 等待 UserService.getUsers(); 期望(axios.get).toHaveBeenCalledWith('/api/users'); 期望（用户）.toEqual（mockUsers）； }); it('处理获取错误', async () => { axios.get.mockRejectedValue(new Error('网络错误')); 等待期望（UserService.getUsers（））.rejects.toThrow（'网络错误'）; }); }); ### 模拟函数从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从 './Button' 导入 { Button }；描述('按钮组件', () => { it('点击时调用 onClick 处理程序', async () => { const user = userEvent.setup(); const handleClick = jest.fn(); render(); 等待 user.click(screen.getByRole('button')); 期望（handleClick）.toHaveBeenCalledTimes（1）； }); it('使用事件对象调用 onClick', async () => { const user = userEvent.setup(); const handleClick = jest.fn(); render(); 等待 user.click(screen.getByRole('button')); 期望（handleClick）.toHaveBeenCalledWith（期望.objectContaining({ 输入：“点击”， }) ）； }); }); ### 使用 MSW（模拟 Service Worker）模拟 API 调用 **设置城市固体废物**： // src/mocks/handlers.js 从“msw”导入{rest}；导出常量处理程序 = [ rest.get('/api/users', (req, res, ctx) => { 返回资源（ ctx.状态(200), ctx.json([ { id: 1, 名称: '爱丽丝' }, { id: 2, 姓名: '鲍勃' }, ]））； }), rest.post('/api/users', async (req, res, ctx) => { const { 姓名，电子邮件 } = wait req.json(); 返回资源（ ctx.状态(201), ctx.json({ 编号: 3, 名字，电子邮件， }) ）； }), ]; **设置服务器**： // src/mocks/server.js 从'msw/node'导入{setupServer}；从'./handlers'导入{处理程序}；导出 const server = setupServer(...handlers); **在setupTests.js中配置**：从'./mocks/server'导入{服务器}； beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); **测试中的用法**：从 '@testing-library/react' 导入 { render, screen, waitFor }; 从'./mocks/server'导入{服务器}；从“msw”导入{rest}；从 './UserList' 导入 { UserList }；描述('用户列表组件', () => { it('获取并显示用户', async () => { 渲染（<用户列表/>）；期望(screen.getByText(/loading/i)).toBeInTheDocument(); 等待 waitFor(() => { 期望(screen.getByText(/alice/i)).toBeInTheDocument(); 期望(screen.getByText(/bob/i)).toBeInTheDocument(); }); }); it('处理服务器错误', async () => { 服务器.使用（ rest.get('/api/users', (req, res, ctx) => { 返回资源（ ctx.状态(500), ctx.json({ message: '内部服务器错误' }) ）； }) ）；渲染（<用户列表/>）；等待 waitFor(() => { Expect(screen.getByText(/加载用户时出错/i)).toBeInTheDocument(); }); }); }); ### 模拟上下文从'@testing-library/react'导入{渲染，屏幕}；从 './AuthContext' 导入 { AuthContext }；从'./ProtectedComponent'导入{ProtectedComponent}； const mockAuthContext = (覆盖 = {}) => ({ user: { id: 1, name: '测试用户' }, 已验证：真实，登录：jest.fn(), 注销：jest.fn(), ...覆盖， }); 描述（'受保护的组件'，（）=> { it('为经过身份验证的用户呈现内容', () => { const contextValue = mockAuthContext(); 渲染（ <受保护的组件/> ）； Expect(screen.getByText(/welcome, test user/i)).toBeInTheDocument(); }); it('为未经身份验证的用户呈现登录提示', () => { const contextValue = mockAuthContext({ 用户：空，已验证：假， }); 渲染（ <受保护的组件/> ）； Expect(screen.getByText(/请登录/i)).toBeInTheDocument(); }); }); ### 模拟子组件从'@testing-library/react'导入{渲染，屏幕}；从'./ParentComponent'导入{ParentComponent}； // 模拟子组件 jest.mock('./ChildComponent', () => ({ 子组件: ({ 标题, onAction }) => (

{标题}

), })); 描述('ParentComponent', () => { it('用模拟的孩子渲染', () => { 渲染(); Expect(screen.getByText(/mocked action/i)).toBeInTheDocument(); }); }); ## 异步测试模式 ### 使用 waitFor 进行测试从 '@testing-library/react' 导入 { render, screen, waitFor }; 从'./AsyncComponent'导入{AsyncComponent}；描述('AsyncComponent', () => { it('加载并显示数据', async () => { 渲染（）；期望(screen.getByText(/loading/i)).toBeInTheDocument(); 等待 waitFor(() => { Expect(screen.getByText(/数据已加载/i)).toBeInTheDocument(); }); }); it('等待特定条件', async () => { 渲染（）；等待等待（ () => { 期望(screen.queryByText(/loading/i)).not.toBeInTheDocument(); }, { 超时：3000 } ）； }); }); ### 使用 findBy 查询进行测试从'@testing-library/react'导入{渲染，屏幕}；从'./DataFetcher'导入{DataFetcher}；描述('DataFetcher组件', () => { it('显示获取的数据', async () => { 渲染（）； // findBy 自动等待元素出现 const header = wait screen.findByRole('heading', { name: /data/i }); 期望（标题）.toBeInTheDocument（）； }); it('处理丢失元素的超时', async () => { 渲染(); 等待期待（ screen.findByText(/success/i, {}, { 超时: 500 }) ).rejects.toThrow(); }); }); ### 测试 Promise 从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从'./AsyncForm'导入{AsyncForm}；描述('AsyncForm组件', () => { it('提交表单并显示成功消息', async () => { const user = userEvent.setup(); 渲染(); const input = screen.getByLabelText(/name/i); const SubmitBtn = screen.getByRole('button', { name: /submit/i }); 等待 user.type(input, 'John Doe'); 等待用户.click(submitBtn); const successMsg = wait screen.findByText(/提交成功/i); 期望(successMsg).toBeInTheDocument(); }); it('失败时显示错误消息', async () => { const user = userEvent.setup(); 渲染(); const SubmitBtn = screen.getByRole('button', { name: /submit/i }); 等待用户.click(submitBtn); const errorMsg = wait screen.findByRole('alert'); Expect(errorMsg).toHaveTextContent(/提交失败/i); }); }); ### 使用假定时器进行测试从 '@testing-library/react' 导入 { render, screen, act }; 从 './Timer' 导入 { Timer } ；描述('计时器组件', () => { 之前（（）=> { jest.useFakeTimers(); }); 每个之后（（）=> { jest.useRealTimers(); }); it('每秒更新一次计时器', () => { 渲染（<定时器/>）； Expect(screen.getByText(/0 秒/i)).toBeInTheDocument(); 行动（（）=> { 开玩笑。advanceTimersByTime(1000); }); Expect(screen.getByText(/1 秒/i)).toBeInTheDocument(); 行动（（）=> { 开玩笑。advanceTimersByTime(3000); }); Expect(screen.getByText(/4 秒/i)).toBeInTheDocument(); }); it('卸载时清理计时器', () => { const { 卸载 } = render(); const clearIntervalSpy = jest.spyOn(global, 'clearInterval'); 卸载（）；期望(clearIntervalSpy).toHaveBeenCalled(); }); }); ## 测试自定义钩子 ### 基本 Hook 测试从'@testing-library/react'导入{renderHook}；从 './useCounter' 导入 { useCounter } ；描述('useCounter Hook', () => { 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); }); }); ### 使用 Props 测试 Hook 从'@testing-library/react'导入{renderHook}；从'./useFetch'导入{useFetch}；描述('useFetch Hook', () => { it('获取给定 URL 的数据', async () => { const { 结果 } = renderHook(() => useFetch('/api/users')); 期望(结果.当前.加载).toBe(true); 等待 waitFor(() => { 期望(结果.当前.加载).toBe(假); }); 期望(结果.当前.数据).toBeDefined(); 期望(结果.当前.错误).toBeNull(); }); it('当 URL 更改时重新获取', async () => { const { 结果，重新渲染 } = renderHook( ({ url }) => useFetch(url), { initialProps: { url: '/api/users' } } ）；等待 waitFor(() => { 期望(结果.当前.加载).toBe(假); }); const firstData = result.current.data; 重新渲染({ url: '/api/posts' }); 等待 waitFor(() => { 期望(结果.当前.数据).not.toEqual(firstData); }); }); }); ### 使用上下文测试 Hook 从'@testing-library/react'导入{renderHook}；从'./ThemeContext'导入{ThemeProvider}；从 './useTheme' 导入 { useTheme } ；描述('useTheme Hook', () => { const 包装器 = ({ 孩子 }) => ( {孩子} ）； it('返回当前主题', () => { const { 结果 } = renderHook(() => useTheme(), { 包装器 }); Expect(result.current.theme).toBe('light'); }); it('切换主题', () => { const { 结果 } = renderHook(() => useTheme(), { 包装器 }); 行动（（）=> { result.current.toggleTheme(); }); Expect(result.current.theme).toBe('黑暗'); }); }); ### 测试异步钩子从 '@testing-library/react' 导入 { renderHook, waitFor }; 从'./useAsyncData'导入{useAsyncData}；描述（'useAsyncData Hook'，（）=> { it('异步加载数据', async () => { const { 结果 } = renderHook(() => useAsyncData('/api/data')); 期望(结果.当前.加载).toBe(true); 期望(结果.当前.数据).toBeNull(); 等待 waitFor(() => { 期望(结果.当前.加载).toBe(假); }); 期望(结果.当前.数据).toBeDefined(); }); it('处理错误', async () => { const { 结果 } = renderHook(() => useAsyncData('/api/error')); 等待 waitFor(() => { 期望(结果.当前.加载).toBe(假); }); 期望(结果.当前.错误).toBeDefined(); 期望(结果.当前.数据).toBeNull(); }); }); ## 集成测试模式 ### 测试组件集成从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从'./App'导入{App}；描述（'应用程序集成'，（）=> { it('在页面之间导航', async () => { const user = userEvent.setup(); 渲染（<应用/>）； Expect(screen.getByText(/home page/i)).toBeInTheDocument(); const aboutLink = screen.getByRole('link', { name: /about/i }); 等待用户点击（aboutLink）； Expect(screen.getByText(/about page/i)).toBeInTheDocument(); }); it('完成完整的用户流程', async () => { const user = userEvent.setup(); 渲染（<应用/>）； // 导航到注册等待 user.click(screen.getByRole('link', { name: /sign up/i })); // 填写表格等待 user.type(screen.getByLabelText(/email/i), 'user@example.com'); 等待 user.type(screen.getByLabelText(/password/i), 'password123'); // 提交表单等待 user.click(screen.getByRole('button', { name: /submit/i })); // 验证成功期望（等待屏幕.findByText（/welcome/i））.toBeInTheDocument（）; }); }); ### 使用路由器进行测试从'@testing-library/react'导入{渲染，屏幕}；从'react-router-dom'导入{MemoryRouter}；从'@testing-library/user-event'导入userEvent；从'./AppRoutes'导入{AppRoutes}； const renderWithRouter = (ui, {initialEntries = ['/'] } = {}) => { 返回渲染（ {用户界面} ）； }; 描述（'应用程序路由集成'，（）=> { it('默认渲染主页', () => { renderWithRouter(); 期望(screen.getByText(/home/i)).toBeInTheDocument(); }); it('在 /users/:id 处呈现用户页面', () => { renderWithRouter(, { initialEntries: ['/users/123'] }); Expect(screen.getByText(/用户个人资料/i)).toBeInTheDocument(); }); it('以编程方式导航', async () => { const user = userEvent.setup(); renderWithRouter(); const navButton = screen.getByRole('button', { name: /转到个人资料/i }); 等待用户点击（navButton）； Expect(screen.getByText(/个人资料页/i)).toBeInTheDocument(); }); }); ### 使用 Redux 进行测试从'@testing-library/react'导入{渲染，屏幕}；从'react-redux'导入{Provider}；从'@reduxjs/toolkit'导入{configureStore}；从'@testing-library/user-event'导入userEvent；从 './TodoList' 导入 { TodoList }；从 './todosSlice' 导入 todosReducer； const createMockStore = (initialState = {}) => { 返回配置存储（{ 减速器：{ 待办事项：todosReducer， }, 预加载状态：初始状态， }); }; const renderWithStore = (ui, { store = createMockStore() } = {}) => { return render({ui}); }; 描述（'TodoList 集成', () => { it('添加新待办事项', async () => { const user = userEvent.setup(); renderWithStore(); const input = screen.getByPlaceholderText(/new todo/i); const addButton = screen.getByRole('button', { name: /add/i }); wait user.type(input, '购买杂货'); 等待用户点击（addButton）； Expect(screen.getByText(/买杂货/i)).toBeInTheDocument(); }); it('从商店渲染初始待办事项', () => { 常量初始状态 = { 待办事项：{ 项目：[ { id: 1, text: '现有待办事项', 已完成: false }, ], }, }; renderWithStore(, { store: createMockStore(initialState) }); Expect(screen.getByText(/现有的待办事项/i)).toBeInTheDocument(); }); }); ## Jest DOM 匹配器 ### 常见匹配器 // 元素存在期望(元素).toBeInTheDocument(); Expect(element).not.toBeInTheDocument(); // 可见性期望(元素).toBeVisible(); Expect(element).not.toBeVisible(); // 文本内容 Expect(element).toHaveTextContent('Hello World'); Expect(element).toHaveTextContent(/hello/i); // 属性 Expect(element).toHaveAttribute('类型', '提交'); Expect(element).toHaveAttribute('禁用'); // 类 Expect(element).toHaveClass('active'); Expect(element).toHaveClass('btn', 'btn-primary'); // 样式 Expect(element).toHaveStyle({ color: 'red' }); Expect(element).toHaveStyle('显示：无'); // 表格期望(输入).toHaveValue('测试'); 期望(输入).toHaveDisplayValue('测试'); 期望（复选框）.toBeChecked（）；期望（复选框）.not.toBeChecked（）；期望（输入）。toBeDisabled（）；期望（输入）。toBeEnabled（）；期望(输入).toBeRequired(); 期望(输入).toBeInvalid(); 期望(输入).toBeValid(); // 焦点期望(元素).toHaveFocus(); // 辅助功能 Expect(element).toHaveAccessibleName('提交按钮'); Expect(element).toHaveAccessibleDescription('点击提交表单'); // 包含期望（容器）.toContainElement（子）； Expect(container).toContainHTML('Text'); ## 最佳实践 ### 测试组织 1. **将相关测试分组** ：使用 `describe` 块来组织测试描述('用户资料', () => { 描述('加载时', () => { it('显示加载微调器', () => {}); }); 描述（'加载时'，（）=> { it('显示用户信息', () => {}); it('显示个人资料图片', () => {}); }); }); 2. **使用描述性测试名称**：测试名称应该描述行为 // 好 it('登录失败时显示错误信息', () => {}); // 不好 it('测试登录', () => {}); 3. **遵循 AAA 模式**：安排、行动、断言 it('增量计数器', async () => { // 排列 const user = userEvent.setup(); 渲染（<计数器/>）； // 行动等待 user.click(screen.getByRole('button', { name: /increment/i })); // 断言 Expect(screen.getByText(/count: 1/i)).toBeInTheDocument(); }); ### 查询最佳实践 1. **首选可访问查询**：使用 getByRole、getByLabelText 2. **使用屏幕查询**：从屏幕导入而不是解构渲染 3. **避免 getByTestId** ：仅将其用作最后的手段 4. **使用正则表达式**：比精确字符串更灵活 ### 异步测试最佳实践 1. **使用 findBy 进行异步** ：优先使用 findBy 而不是 getBy + waitFor 2. **设置适当的超时**：为慢速操作配置 waitFor 超时 3. **避免 act() 警告**：适当使用 userEvent、waitFor、findBy 4. **清理计时器**：使用 jest.useFakeTimers() 并正确清理 ### 模拟最佳实践 1. **Mock at Right Level** ：模拟外部依赖，而不是内部逻辑 2. **Reset Mocks** : 清除测试之间的模拟 3. **使用 MSW for API** ：优先使用 MSW 而不是直接模拟 axios/fetch 4. **避免过度嘲笑**：不要嘲笑你正在测试的内容 ### 覆盖范围最佳实践 1. **关注行为**：测试面向用户的行为，而不是实现 2. **不要追求100%**：专注于关键路径 3. **测试错误状态**：包括错误处理测试 4. **测试边缘情况**：包括边界条件 ## 常见测试模式 ### 测试列表和迭代 it('渲染项目列表', () => { const items = ['苹果', '香蕉', '樱桃']; 渲染(); items.forEach(项目 => { Expect(screen.getByText(item)).toBeInTheDocument(); }); }); ### 测试可访问性 it('具有可访问的形式', () => { 渲染（）； const nameInput = screen.getByLabelText(/name/i); Expect(nameInput).toHaveAccessibleName('名称'); 期望(nameInput).toBeRequired(); const SubmitButton = screen.getByRole('button', { name: /submit/i }); Expect(submitButton).toHaveAttribute('类型', '提交'); }); ### 测试误差边界 it('捕获错误并显示后备', () => { 常量 ThrowError = () => { throw new Error('测试错误'); }; // 在此测试中抑制 console.error const sp = jest.spyOn(console, 'error').mockImplementation(() => {}); 渲染（出了点问题}> <抛出错误/> ）； Expect(screen.getByText(/出了点问题/i)).toBeInTheDocument(); 间谍.mockRestore(); }); ### 测试门户 it('在门户中呈现模态', () => { render(模态内容); const modal = screen.getByText(/模态内容/i); 期望(模态).toBeInTheDocument(); // Modal 应该在 document.body 中，而不是在组件树中 Expect(modal.parentElement).toBe(document.body); }); ## 故障排除 ### 常见问题 **问题**：“无法找到元素” * **解决方案** : 使用 screen.debug() 查看 DOM，检查查询类型，等待异步更新 **问题**：“行为警告” * **解决方案** : 使用 userEvent 而不是 fireEvent，将状态更新包装在 act() 中，使用 waitFor/findBy **问题**：“开玩笑超时” * **解决方案** ：增加超时，检查无限循环，确保异步操作完成 **问题**：“无法读取未定义的属性” * **解决方案**：检查模拟是否设置正确，确保组件接收所需的道具 **问题**：“发现多个元素” * **解决方案** : 让查询更具体，对多个元素使用 getAllBy ## 资源 * Jest 文档： * React 测试库： * 测试库查询： * Jest DOM 匹配器： * MSW 文档： * 常见错误： ** ** **技能版本**：1.0.0 **最后更新**：2025 年 10 月 **技能类别**：测试、React、质量保证 **兼容**：Jest 29+、React 测试库 13+、React 16.8+

玩笑反应测试

包含技能