testing-patterns
Provides frontend testing patterns for component tests, custom hook tests, and MSW API mocks; use when writing tests for components, hooks, or integration flows.
ソース情報
- リポジトリ
- sawrus/agent-guides
- ソースの最終更新活動
- 2026年10月16日 19:08
- 検出された SKILL.md の言語
- 英語
- スター
- 19
- フォーク
- 4
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- testing-patterns
- description
- Provides frontend testing patterns for component tests, custom hook tests, and MSW API mocks; use when writing tests for components, hooks, or integration flows.
# Skill: Frontend Testing Patterns
## When to load
When writing tests for components, hooks, or integration flows.
## Philosophy
Test **behavior**, not implementation. A user doesn't care that you called `setState`; they care that clicking "Submit" shows a success message.
## Component Test Template
```tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserCard } from './UserCard';
const defaultUser: User = {
id: '1', name: 'Jane Smith', email: 'jane@example.com', role: 'admin',
};
describe('UserCard', () => {
it('renders user information', () => {
render(<UserCard user={defaultUser} />);
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
});
it('calls onEdit when edit button is clicked', async () => {
const onEdit = vi.fn();
render(<UserCard user={defaultUser} onEdit={onEdit} />);
await userEvent.click(screen.getByRole('button', { name: /edit/i }));
expect(onEdit).toHaveBeenCalledWith(defaultUser.id);
});
});
```
## Custom Hook Testing
```tsx
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';
it('increments count', () => {
const { result } = renderHook(() => useCounter(0));
act(() => { result.current.increment(); });
expect(result.current.count).toBe(1);
});
```
## MSW: Mock API Calls
```ts
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/users', () =>
HttpResponse.json([{ id: '1', name: 'Jane' }])
),
];
```
## Test Type Decision
| Scenario | Test Type |
|:---|:---|
| Component renders | Unit (RTL) |
| User interaction | Unit (RTL + userEvent) |
| Data fetching states | Unit (RTL + MSW) |
| Full user journey | E2E (Playwright) |
GitHubで見る