# 测试模式和实用程序 ## 测试理念 **测试驱动开发（TDD）：** * 首先编写失败的测试 * 实现最少的代码来通过 * 绿化后重构 * 永远不要在没有失败的测试的情况下编写生产代码 **行为驱动测试：** * 测试行为，而不是实现 * 关注公共API和业务需求 * 避免测试实现细节 * 使用描述性测试名称来描述行为 **工厂模式：** * 创建 `getMockX(overrides?: Partial)` 函数 * 提供合理的默认值 * 允许覆盖特定属性 * 保持测试干燥且可维护 ## 测试实用程序 ### 自定义渲染函数创建一个自定义渲染，用所需的提供程序包装组件： // src/utils/testUtils.tsx 从'@testing-library/react-native'导入{渲染}；从 './theme' 导入 { ThemeProvider } ；导出 const renderWithTheme = (ui: React.ReactElement) => { 返回渲染（ {ui} ）； }; **用途：** 从 'utils/testUtils' 导入 { renderWithTheme }；从'@testing-library/react-native'导入{屏幕}； it('应该渲染组件', () => { renderWithTheme(); Expect(screen.getByText('Hello')).toBeTruthy(); }); ## 工厂模式 ### 组件道具工厂从 'react' 导入 { ComponentProps } ； const getMockMyComponentProps = ( 覆盖？： Partial> ) => { 返回{ title: '默认标题', 计数：0， onPress: jest.fn(), 正在加载：假， ...覆盖， }; }; // 测试中的用法 it('应该使用自定义标题进行渲染', () => { const props = getMockMyComponentProps({ title: '自定义标题' }); renderWithTheme(); Expect(screen.getByText('自定义标题')).toBeTruthy(); }); ### 数据工厂界面用户{ id：字符串；名称：字符串；电子邮件：字符串；角色：“管理员”| '用户'; } const getMockUser = (覆盖?: Partial): User => { 返回{ id: '123', 名称：“约翰·多伊”，电子邮件：'john@example.com'，角色：'用户'， ...覆盖， }; }; // 用法 it('应该为管理员用户显示管理员徽章', () => { const user = getMockUser({ 角色: 'admin' }); renderWithTheme(); Expect(screen.getByText('Admin')).toBeTruthy(); }); ## 模拟模式 ### 模拟模块 // 模拟整个模块 jest.mock('utils/analytics'); // 使用工厂函数进行模拟 jest.mock('utils/analytics', () => ({ 分析：{ 日志事件：jest.fn(), }, })); // 访问测试中的模拟 const mockLogEvent = jest.requireMock('utils/analytics').Analytics.logEvent; ### 模拟 GraphQL 钩子 jest.mock('./GetItems. generated', () => ({ useGetItemsQuery: jest.fn(), })); const mockUseGetItemsQuery = jest.requireMock( './GetItems.生成' ).useGetItemsQuery 作为 jest.Mock; // 测试中 mockUseGetItemsQuery.mockReturnValue({ 数据：{ 项目：[] }，加载：假，错误：未定义， }); ## 测试结构描述('组件名称', () => { 之前（（）=> { jest.clearAllMocks(); }); 描述('渲染', () => { it('应该使用默认 props 渲染组件', () => {}); it('加载时应该呈现加载状态', () => {}); }); 描述('用户交互', () => { it('单击按钮时应调用 onPress', async () => {}); }); 描述（'边缘情况'，（）=> { it('应该优雅地处理空数据', () => {}); }); }); ## 查询模式 // 元素必须存在 Expect(screen.getByText('Hello')).toBeTruthy(); // 元素不应该存在 Expect(screen.queryByText('再见')).toBeNull(); // 元素异步出现等待 waitFor(() => { Expect(screen.findByText('已加载')).toBeTruthy(); }); ## 用户交互模式从'@testing-library/react-native'导入{fireEvent，screen}； it('应该在单击按钮时提交表单', async () => { const onSubmit = jest.fn(); renderWithTheme(); fireEvent.changeText(screen.getByLabelText('电子邮件'), 'user@example.com'); fireEvent.changeText(screen.getByLabelText('密码'), '密码123'); fireEvent.press(screen.getByTestId('登录按钮')); 等待 waitFor(() => { 期望（onSubmit）.toHaveBeenCalled（）； }); }); ## 要避免的反模式 ### 测试模拟行为而不是真实行为 // 不好 - 测试模拟期望(mockFetchData).toHaveBeenCalled(); // 好 - 测试实际行为 Expect(screen.getByText('John Doe')).toBeTruthy(); ### 不使用工厂 // 错误 - 测试数据重复、不一致 it('测试 1', () => { const user = { id: '1', 姓名: 'John', 电子邮件: 'john@test.com', 角色: '用户' }; }); it('测试 2', () => { const user = { id: '2', 姓名: 'Jane', 电子邮件: 'jane@test.com' }; // 缺少角色！ }); // 好 - 可重用工厂 const user = getMockUser({ name: '自定义名称' }); ## 最佳实践 1. **始终使用工厂函数**来处理 props 和数据 2. **测试行为，而不是实现** 3. **使用描述性测试名称** 4. **用描述块进行组织** 5. **测试之间清晰的模拟** 6. **保持测试集中** \- 每个测试一个行为 ## 运行测试 # 运行所有测试 npm测试 # 覆盖运行 npm 运行测试：覆盖率 # 运行特定文件 npm test 组件名称.test.tsx ## 与其他技能的整合 * **react-ui-patterns** ：测试所有 UI 状态（加载、错误、空、成功） * **系统调试** ：在修复之前编写重现错误的测试

测试模式

包含技能