testing-patterns 是一套面向 Jest 的测试模式与工具集。按照资料描述,它用于编写单元测试、创建测试工厂以及遵循测试驱动开发(TDD)工作流。
测试哲学 TDD 流程:先写会失败的测试,再实现最小代码使其通过,变绿后重构,并且强调在没有失败测试前不要编写生产代码。行为驱动测试:测试行为而非实现,聚焦公共 API 和业务需求,避免测试实现细节,使用能描述行为的测试名。工厂模式:创建 getMockX(overrides?: Partial<X>) 形式的函数,提供合理默认值,允许覆盖特定属性,保持测试 DRY 且可维护。
测试工具 自定义渲染函数:通过封装渲染并包裹所需 Provider,例如在 src/utils/testUtils.tsx 中导出 renderWithTheme,将传入的 UI 包在 ThemeProvider 中再调用 render,用法为 renderWithTheme(<MyComponent />) 后配合 screen.getByText 断言。
工厂模式 组件 props 工厂:定义 getMockMyComponentProps(overrides?) 返回 title、count、onPress: jest.fn()、isLoading 等默认值并用 ...overrides 覆盖。数据工厂:定义 getMockUser(overrides?) 返回 id、name、email、role 等默认字段,测试中按需覆盖 role 等属性。
Mock 策略 模块 mock 可用 jest.mock('utils/analytics'),或用工厂函数返回 { Analytics: { logEvent: jest.fn() } },再以 jest.requireMock 获取对应 mock。GraphQL Hook mock 可对 ./GetItems.generated 使用 jest.mock 返回 { useGetItemsQuery: jest.fn() },再通过 jest.requireMock 取得并设置 mockReturnValue({ data, loading, error })。
测试结构与模式 用 describe 嵌套按 Rendering、User interactions、Edge cases 等分组,beforeEach 中 jest.clearAllMocks()。查询模式包括 getByText 存在性断言、queryByText 为 null 的否定断言,以及用 waitFor 配合 findByText 处理异步出现。用户交互模式使用 fireEvent.changeText、fireEvent.press 等模拟输入与点击,并断言 onSubmit 被调用。
反模式 避免“测试 mock 行为而非真实行为”(如断言 mockFetchData 被调用,而应断言界面文本);避免不使用工厂而导致测试数据重复且不一致(如第二个测试缺少 role 字段)。
最佳实践 始终为 props 和数据使用工厂函数;测试行为而非实现;使用描述性测试名;用 describe 组织;测试间清除 mock;保持测试聚焦,一个测试验证一个行为。
运行测试 提供命令:npm test 运行全部测试,npm run test:coverage 带覆盖率运行,npm test ComponentName.test.tsx 运行指定文件。
与其他技能的集成 与 react-ui-patterns 配合可测试所有 UI 状态(loading、error、empty、success);与 systematic-debugging 配合可在修复前先写复现 bug 的测试。