[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71A4EB0Z2M7QPMEQB6RDPR3":3,"skill-same:01M71A4EB0Z2M7QPMEQB6RDPR3":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":14,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M71A4EB0Z2M7QPMEQB6RDPR3","testing-patterns",null,"Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Ftesting-patterns\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"testing","patterns","testing patterns","unit tests","use","tests","mocking","refactor","2026","strategies","jest","unknown","workflow","when","writing","red-green-refactor","cycle","green","community","unit","2026-11-10 10:12:30",false,"---\nname: testing-patterns\ndescription: \"Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Testing Patterns and Utilities\n\n## Testing Philosophy\n\n**Test-Driven Development (TDD):**\n- Write failing test FIRST\n- Implement minimal code to pass\n- Refactor after green\n- Never write production code without a failing test\n\n**Behavior-Driven Testing:**\n- Test behavior, not implementation\n- Focus on public APIs and business requirements\n- Avoid testing implementation details\n- Use descriptive test names that describe behavior\n\n**Factory Pattern:**\n- Create `getMockX(overrides?: Partial\u003CX>)` functions\n- Provide sensible defaults\n- Allow overriding specific properties\n- Keep tests DRY and maintainable\n\n## Test Utilities\n\n### Custom Render Function\n\nCreate a custom render that wraps components with required providers:\n\n```typescript\n\u002F\u002F src\u002Futils\u002FtestUtils.tsx\nimport { render } from '@testing-library\u002Freact-native';\nimport { ThemeProvider } from '.\u002Ftheme';\n\nexport const renderWithTheme = (ui: React.ReactElement) => {\n  return render(\n    \u003CThemeProvider>{ui}\u003C\u002FThemeProvider>\n  );\n};\n```\n\n**Usage:**\n```typescript\nimport { renderWithTheme } from 'utils\u002FtestUtils';\nimport { screen } from '@testing-library\u002Freact-native';\n\nit('should render component', () => {\n  renderWithTheme(\u003CMyComponent \u002F>);\n  expect(screen.getByText('Hello')).toBeTruthy();\n});\n```\n\n## Factory Pattern\n\n### Component Props Factory\n\n```typescript\nimport { ComponentProps } from 'react';\n\nconst getMockMyComponentProps = (\n  overrides?: Partial\u003CComponentProps\u003Ctypeof MyComponent>>\n) => {\n  return {\n    title: 'Default Title',\n    count: 0,\n    onPress: jest.fn(),\n    isLoading: false,\n    ...overrides,\n  };\n};\n\n\u002F\u002F Usage in tests\nit('should render with custom title', () => {\n  const props = getMockMyComponentProps({ title: 'Custom Title' });\n  renderWithTheme(\u003CMyComponent {...props} \u002F>);\n  expect(screen.getByText('Custom Title')).toBeTruthy();\n});\n```\n\n### Data Factory\n\n```typescript\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  role: 'admin' | 'user';\n}\n\nconst getMockUser = (overrides?: Partial\u003CUser>): User => {\n  return {\n    id: '123',\n    name: 'John Doe',\n    email: 'john@example.com',\n    role: 'user',\n    ...overrides,\n  };\n};\n\n\u002F\u002F Usage\nit('should display admin badge for admin users', () => {\n  const user = getMockUser({ role: 'admin' });\n  renderWithTheme(\u003CUserCard user={user} \u002F>);\n  expect(screen.getByText('Admin')).toBeTruthy();\n});\n```\n\n## Mocking Patterns\n\n### Mocking Modules\n\n```typescript\n\u002F\u002F Mock entire module\njest.mock('utils\u002Fanalytics');\n\n\u002F\u002F Mock with factory function\njest.mock('utils\u002Fanalytics', () => ({\n  Analytics: {\n    logEvent: jest.fn(),\n  },\n}));\n\n\u002F\u002F Access mock in test\nconst mockLogEvent = jest.requireMock('utils\u002Fanalytics').Analytics.logEvent;\n```\n\n### Mocking GraphQL Hooks\n\n```typescript\njest.mock('.\u002FGetItems.generated', () => ({\n  useGetItemsQuery: jest.fn(),\n}));\n\nconst mockUseGetItemsQuery = jest.requireMock(\n  '.\u002FGetItems.generated'\n).useGetItemsQuery as jest.Mock;\n\n\u002F\u002F In test\nmockUseGetItemsQuery.mockReturnValue({\n  data: { items: [] },\n  loading: false,\n  error: undefined,\n});\n```\n\n## Test Structure\n\n```typescript\ndescribe('ComponentName', () => {\n  beforeEach(() => {\n    jest.clearAllMocks();\n  });\n\n  describe('Rendering', () => {\n    it('should render component with default props', () => {});\n    it('should render loading state when loading', () => {});\n  });\n\n  describe('User interactions', () => {\n    it('should call onPress when button is clicked', async () => {});\n  });\n\n  describe('Edge cases', () => {\n    it('should handle empty data gracefully', () => {});\n  });\n});\n```\n\n## Query Patterns\n\n```typescript\n\u002F\u002F Element must exist\nexpect(screen.getByText('Hello')).toBeTruthy();\n\n\u002F\u002F Element should not exist\nexpect(screen.queryByText('Goodbye')).toBeNull();\n\n\u002F\u002F Element appears asynchronously\nawait waitFor(() => {\n  expect(screen.findByText('Loaded')).toBeTruthy();\n});\n```\n\n## User Interaction Patterns\n\n```typescript\nimport { fireEvent, screen } from '@testing-library\u002Freact-native';\n\nit('should submit form on button click', async () => {\n  const onSubmit = jest.fn();\n  renderWithTheme(\u003CLoginForm onSubmit={onSubmit} \u002F>);\n\n  fireEvent.changeText(screen.getByLabelText('Email'), 'user@example.com');\n  fireEvent.changeText(screen.getByLabelText('Password'), 'password123');\n  fireEvent.press(screen.getByTestId('login-button'));\n\n  await waitFor(() => {\n    expect(onSubmit).toHaveBeenCalled();\n  });\n});\n```\n\n## Anti-Patterns to Avoid\n\n### Testing Mock Behavior Instead of Real Behavior\n\n```typescript\n\u002F\u002F Bad - testing the mock\nexpect(mockFetchData).toHaveBeenCalled();\n\n\u002F\u002F Good - testing actual behavior\nexpect(screen.getByText('John Doe')).toBeTruthy();\n```\n\n### Not Using Factories\n\n```typescript\n\u002F\u002F Bad - duplicated, inconsistent test data\nit('test 1', () => {\n  const user = { id: '1', name: 'John', email: 'john@test.com', role: 'user' };\n});\nit('test 2', () => {\n  const user = { id: '2', name: 'Jane', email: 'jane@test.com' }; \u002F\u002F Missing role!\n});\n\n\u002F\u002F Good - reusable factory\nconst user = getMockUser({ name: 'Custom Name' });\n```\n\n## Best Practices\n\n1. **Always use factory functions** for props and data\n2. **Test behavior, not implementation**\n3. **Use descriptive test names**\n4. **Organize with describe blocks**\n5. **Clear mocks between tests**\n6. **Keep tests focused** - one behavior per test\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run with coverage\nnpm run test:coverage\n\n# Run specific file\nnpm test ComponentName.test.tsx\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Test all UI states (loading, error, empty, success)\n- **systematic-debugging**: Write test that reproduces bug before fixing\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# Testing Patterns and Utilities\n\n## Testing Philosophy\n\n**Test-Driven Development (TDD):**\n- Write failing test FIRST\n- Implement minimal code to pass\n- Refactor after green\n- Never write production code without a failing test\n\n**Behavior-Driven Testing:**\n- Test behavior, not implementation\n- Focus on public APIs and business requirements\n- Avoid testing implementation details\n- Use descriptive test names that describe behavior\n\n**Factory Pattern:**\n- Create `getMockX(overrides?: Partial\u003CX>)` functions\n- Provide sensible defaults\n- Allow overriding specific properties\n- Keep tests DRY and maintainable\n\n## Test Utilities\n\n### Custom Render Function\n\nCreate a custom render that wraps components with required providers:\n\n```typescript\n\u002F\u002F src\u002Futils\u002FtestUtils.tsx\nimport { render } from '@testing-library\u002Freact-native';\nimport { ThemeProvider } from '.\u002Ftheme';\n\nexport const renderWithTheme = (ui: React.ReactElement) => {\n  return render(\n    \u003CThemeProvider>{ui}\u003C\u002FThemeProvider>\n  );\n};\n```\n\n**Usage:**\n```typescript\nimport { renderWithTheme } from 'utils\u002FtestUtils';\nimport { screen } from '@testing-library\u002Freact-native';\n\nit('should render component', () => {\n  renderWithTheme(\u003CMyComponent \u002F>);\n  expect(screen.getByText('Hello')).toBeTruthy();\n});\n```\n\n## Factory Pattern\n\n### Component Props Factory\n\n```typescript\nimport { ComponentProps } from 'react';\n\nconst getMockMyComponentProps = (\n  overrides?: Partial\u003CComponentProps\u003Ctypeof MyComponent>>\n) => {\n  return {\n    title: 'Default Title',\n    count: 0,\n    onPress: jest.fn(),\n    isLoading: false,\n    ...overrides,\n  };\n};\n\n\u002F\u002F Usage in tests\nit('should render with custom title', () => {\n  const props = getMockMyComponentProps({ title: 'Custom Title' });\n  renderWithTheme(\u003CMyComponent {...props} \u002F>);\n  expect(screen.getByText('Custom Title')).toBeTruthy();\n});\n```\n\n### Data Factory\n\n```typescript\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  role: 'admin' | 'user';\n}\n\nconst getMockUser = (overrides?: Partial\u003CUser>): User => {\n  return {\n    id: '123',\n    name: 'John Doe',\n    email: 'john@example.com',\n    role: 'user',\n    ...overrides,\n  };\n};\n\n\u002F\u002F Usage\nit('should display admin badge for admin users', () => {\n  const user = getMockUser({ role: 'admin' });\n  renderWithTheme(\u003CUserCard user={user} \u002F>);\n  expect(screen.getByText('Admin')).toBeTruthy();\n});\n```\n\n## Mocking Patterns\n\n### Mocking Modules\n\n```typescript\n\u002F\u002F Mock entire module\njest.mock('utils\u002Fanalytics');\n\n\u002F\u002F Mock with factory function\njest.mock('utils\u002Fanalytics', () => ({\n  Analytics: {\n    logEvent: jest.fn(),\n  },\n}));\n\n\u002F\u002F Access mock in test\nconst mockLogEvent = jest.requireMock('utils\u002Fanalytics').Analytics.logEvent;\n```\n\n### Mocking GraphQL Hooks\n\n```typescript\njest.mock('.\u002FGetItems.generated', () => ({\n  useGetItemsQuery: jest.fn(),\n}));\n\nconst mockUseGetItemsQuery = jest.requireMock(\n  '.\u002FGetItems.generated'\n).useGetItemsQuery as jest.Mock;\n\n\u002F\u002F In test\nmockUseGetItemsQuery.mockReturnValue({\n  data: { items: [] },\n  loading: false,\n  error: undefined,\n});\n```\n\n## Test Structure\n\n```typescript\ndescribe('ComponentName', () => {\n  beforeEach(() => {\n    jest.clearAllMocks();\n  });\n\n  describe('Rendering', () => {\n    it('should render component with default props', () => {});\n    it('should render loading state when loading', () => {});\n  });\n\n  describe('User interactions', () => {\n    it('should call onPress when button is clicked', async () => {});\n  });\n\n  describe('Edge cases', () => {\n    it('should handle empty data gracefully', () => {});\n  });\n});\n```\n\n## Query Patterns\n\n```typescript\n\u002F\u002F Element must exist\nexpect(screen.getByText('Hello')).toBeTruthy();\n\n\u002F\u002F Element should not exist\nexpect(screen.queryByText('Goodbye')).toBeNull();\n\n\u002F\u002F Element appears asynchronously\nawait waitFor(() => {\n  expect(screen.findByText('Loaded')).toBeTruthy();\n});\n```\n\n## User Interaction Patterns\n\n```typescript\nimport { fireEvent, screen } from '@testing-library\u002Freact-native';\n\nit('should submit form on button click', async () => {\n  const onSubmit = jest.fn();\n  renderWithTheme(\u003CLoginForm onSubmit={onSubmit} \u002F>);\n\n  fireEvent.changeText(screen.getByLabelText('Email'), 'user@example.com');\n  fireEvent.changeText(screen.getByLabelText('Password'), 'password123');\n  fireEvent.press(screen.getByTestId('login-button'));\n\n  await waitFor(() => {\n    expect(onSubmit).toHaveBeenCalled();\n  });\n});\n```\n\n## Anti-Patterns to Avoid\n\n### Testing Mock Behavior Instead of Real Behavior\n\n```typescript\n\u002F\u002F Bad - testing the mock\nexpect(mockFetchData).toHaveBeenCalled();\n\n\u002F\u002F Good - testing actual behavior\nexpect(screen.getByText('John Doe')).toBeTruthy();\n```\n\n### Not Using Factories\n\n```typescript\n\u002F\u002F Bad - duplicated, inconsistent test data\nit('test 1', () => {\n  const user = { id: '1', name: 'John', email: 'john@test.com', role: 'user' };\n});\nit('test 2', () => {\n  const user = { id: '2', name: 'Jane', email: 'jane@test.com' }; \u002F\u002F Missing role!\n});\n\n\u002F\u002F Good - reusable factory\nconst user = getMockUser({ name: 'Custom Name' });\n```\n\n## Best Practices\n\n1. **Always use factory functions** for props and data\n2. **Test behavior, not implementation**\n3. **Use descriptive test names**\n4. **Organize with describe blocks**\n5. **Clear mocks between tests**\n6. **Keep tests focused** - one behavior per test\n\n## Running Tests\n\n```bash\n# Run all tests\nnpm test\n\n# Run with coverage\nnpm run test:coverage\n\n# Run specific file\nnpm test ComponentName.test.tsx\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Test all UI states (loading, error, empty, success)\n- **systematic-debugging**: Write test that reproduces bug before fixing\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":35,"source":42,"date_added":49,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fglobal\u002Ftesting-patterns","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill testing-patterns",{"tool":62,"command":63},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill testing-patterns",{"tool":65,"command":66},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill testing-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Ftesting-patterns\u002FSKILL.md",true,[],[71,95,120,130,143,160],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":82,"publishedAt":44},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[83,84,85,86,87,88,89,90,91,92,93,94],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":44},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[102,103,104,105,106,107,85,108,109,110,111,37,112,113,114,115,116,117,118,119],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","brew","live","data","google","install","read","across","api",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":126,"publishedAt":44},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[127,128,102,112,113,114,115,106,85,117,129,118,119,37,110,109,108,116,107,105],"trend radar","radar","pulse",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":136,"publishedAt":44},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[137,138,139,140,141,142],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":144,"name":145,"nameZh":6,"description":146,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":152,"publishedAt":44},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[149],{"categoryNo":150,"categoryName":151,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[145,91,153,154,155,94,112,156,157,158,104,159,116],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":166,"publishedAt":44},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[162,167,168,169,116,170,157,171,172,173,174,175],"status","play","go","latest","github","discover","control","cmd","volume"]