testing-patterns
Write Better Jest Tests
こちらからも入手できます: 0xDarkMatter,0xDarkMatter,CleanExpo,ChrisWiles
This skill provides ready-to-use Jest testing patterns including factory functions, custom render utilities, and mocking strategies that help developers write maintainable, DRY tests following TDD principles.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「testing-patterns」を使用しています。 Create a factory function for user data
期待される結果:
```typescript
interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'user';
}
const getMockUser = (overrides?: Partial<User>): User => ({
id: '123',
name: 'John Doe',
email: 'john@example.com',
role: 'user',
...overrides,
});
```
「testing-patterns」を使用しています。 Show me a custom render function
期待される結果:
```typescript
export const renderWithTheme = (ui: React.ReactElement) => {
return render(
<ThemeProvider>{ui}</ThemeProvider>
);
};
```
「testing-patterns」を使用しています。 How should I structure my tests?
期待される結果:
Use describe blocks to group related tests: describe('ComponentName', () => { describe('Rendering', () => {...}); describe('User interactions', () => {...}); describe('Edge cases', () => {...}); });
セキュリティ監査
安全Security review completed. All 42 static findings are false positives triggered by the static analyzer misinterpreting: (1) markdown code formatting backticks as shell commands, (2) TypeScript generics like Partial<X> as cryptographic patterns, and (3) the word 'APIs' as network reconnaissance. The skill is legitimate Jest testing documentation with no security concerns.
品質スコア
作れるもの
Setting up test infrastructure
Create custom render functions and factory utilities that wrap components with required providers like ThemeProvider, reducing boilerplate in every test.
Writing maintainable unit tests
Use factory functions to generate consistent test data, making tests easier to read, maintain, and update when data structures change.
Following TDD methodology
Apply the red-green-refactor cycle by writing failing tests first, then implementing minimal code to pass, ensuring tests drive development.
これらのプロンプトを試す
Help me set up a basic test file for a React component. Show me how to create a custom render function that wraps the component with a ThemeProvider.
Create a factory function called getMockUser that returns a user object with default values for id, name, email, and role. Show how to override specific properties using Partial type.
Show me how to mock a module like 'utils/analytics' in Jest. Include how to access the mock in the test and how to mock return values.
Walk me through the TDD workflow for adding a new feature. Start with writing a failing test, then show the minimal implementation to pass it.
ベストプラクティス
- Always use factory functions for props and data to keep tests DRY and consistent
- Test behavior through the public API rather than implementation details
- Use descriptive test names that explain what behavior is being tested
回避
- Avoid testing mock behavior instead of actual component behavior
- Do not duplicate test data across tests - use factory functions instead
- Avoid testing implementation details that may change refactoring