testing-patterns
Write Better Jest Tests
Também disponível em: 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.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "testing-patterns". Create a factory function for user data
Resultado esperado:
```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,
});
```
A utilizar "testing-patterns". Show me a custom render function
Resultado esperado:
```typescript
export const renderWithTheme = (ui: React.ReactElement) => {
return render(
<ThemeProvider>{ui}</ThemeProvider>
);
};
```
A utilizar "testing-patterns". How should I structure my tests?
Resultado esperado:
Use describe blocks to group related tests: describe('ComponentName', () => { describe('Rendering', () => {...}); describe('User interactions', () => {...}); describe('Edge cases', () => {...}); });
Auditoria de Segurança
SeguroSecurity 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.
Pontuação de qualidade
O Que Você Pode Construir
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.
Tente Estes Prompts
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.
Melhores Práticas
- 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
Evitar
- 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