テストを書くことは難しいです。このスキルでは、Jest、Vitest、Testing Libraryを使用したユニットテスト、統合テスト、E2Eテストのための実証済みのパターンと例を提供し、信頼性の高いテストスイートを素早く構築できます。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「javascript-testing-patterns」を使用しています。 Write unit tests for an add function that takes two numbers and returns their sum
期待される結果:
- ```typescript
- import { describe, it, expect } from 'vitest';
- import { add } from './calculator';
- describe('add', () => {
- it('should add two positive numbers', () => {
- expect(add(2, 3)).toBe(5);
- });
- it('should add negative numbers', () => {
- expect(add(-2, -3)).toBe(-5);
- });
- it('should handle zero', () => {
- expect(add(0, 5)).toBe(5);
- });
- });
- ```
「javascript-testing-patterns」を使用しています。 Create a test for a user form component that validates email and submits data
期待される結果:
- ```typescript
- import { render, screen, fireEvent } from '@testing-library/react';
- import { describe, it, expect, vi } from 'vitest';
- import { UserForm } from './UserForm';
- describe('UserForm', () => {
- it('should show validation error for invalid email', () => {
- render(<UserForm onSubmit={vi.fn()} />);
- fireEvent.change(screen.getByTestId('email-input'), {
- target: { value: 'invalid-email' }
- });
- fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
- expect(screen.getByText('Invalid email')).toBeInTheDocument();
- });
- it('should call onSubmit with form data', () => {
- const onSubmit = vi.fn();
- render(<UserForm onSubmit={onSubmit} />);
- fireEvent.change(screen.getByTestId('name-input'), {
- target: { value: 'John Doe' }
- });
- fireEvent.change(screen.getByTestId('email-input'), {
- target: { value: 'john@example.com' }
- });
- fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
- expect(onSubmit).toHaveBeenCalledWith({
- name: 'John Doe',
- email: 'john@example.com'
- });
- });
- });
- ```
セキュリティ監査
安全All 145 static findings are false positives. The detected patterns exist only in code examples within markdown documentation files, not in executable code. The skill provides educational content about testing patterns with code samples demonstrating legitimate testing practices including mock setup, API testing, email service testing, and database integration testing. No executable code, no security risks.
品質スコア
作れるもの
新規プロジェクトテストセットアップ
適切なフレームワーク設定、ディレクトリ構造、CI/CD統合を持つゼロからテストインフラストラクチャを確立する必要がある、新しいJavaScript/TypeScriptプロジェクトを開始する開発者向け。
既存のコードベースへのテスト追加
既存の機能を壊すことなく、既存の関数、API、およびコンポーネントのテストを徐々に導入する必要がある、レガシーまたは未テストのアプリケーションを保守するチーム向け。
テストカバレッジの改善
高度なモックパターン、フィクスチャファクトリ、統合テスト戦略を学ぶことで、コードカバレッジを高め、テスト品質を向上させたい開発者向け。
これらのプロンプトを試す
[関数の動作の説明]を行う関数のユニットテストを作成してください。成功ケースとエラー処理のテストを含んでください。
[コンポーネント動作の説明]を行うコンポーネントのReact Testing Libraryテストを作成してください。ユーザーインタラクション、フォーム送信、エラー状態をテストしてください。
[リストされた依存関係]を含む外部依存関係を模倣した[サービス/クラス]のテストを作成してください。依存関係注入とvi.mockパターンを使用してください。
ベストプラクティス
- 明確な構造と可読性のために、すべてのテストでArrange-Act-Assert(AAA)パターンを守ってください
- リファクタリングに対してテストを堅牢にするために、実装詳細ではなく動作とユーザーインタラクションをテストしてください
- テストを分離し、ポリューショニングを防ぐために、beforeEachとafterEachフックをセットアップとティアダウンに使用してください
回避
- 内部関数の呼び出しやコンポーネントの状態など、実装詳細ではなくobservableな動作をテストしてください
- リファクタリング時に動作は変わらないのに壊れる脆いテストを書かないでください
- テストを理解し保守しづらくする過度に複雑なテストセットアップと多くのモックを作成しないでください
よくある質問
JestとVitestのどちらを使用すべきですか?
外部APIを使用するコードはどのようにテストしますか?
どのテストカバレッジを目指すべきですか?
プライベートなメソッドをテストすべきですか?
データベーステストはどのように処理しますか?
ユニットテストと統合テストの違いは何ですか?
開発者の詳細
作成者
sickn33ライセンス
MIT
リポジトリ
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/javascript-testing-patterns参照
main
ファイル構成