Skip to content

feat: 包括的テストテンプレート(21種類)を追加 - #532

Merged
keito4 merged 3 commits into
mainfrom
feat/testing-templates
Mar 5, 2026
Merged

feat: 包括的テストテンプレート(21種類)を追加#532
keito4 merged 3 commits into
mainfrom
feat/testing-templates

Conversation

@keito4

@keito4 keito4 commented Mar 5, 2026

Copy link
Copy Markdown
Owner

Summary

  • Next.js プロジェクト向けの包括的なテスト設定テンプレート(21種類)を追加
  • /setup-tests コマンドで他のリポジトリに簡単に適用可能
  • 5段階のレベル構成(minimal → standard → comprehensive → full → enterprise)

追加テスト種別

基本テスト (5種類)

  • Unit, Component, Snapshot, Integration, E2E

品質保証テスト (7種類)

  • API, Regression, Smoke, Contract, Scenario, Visual, A11y

高度なテスト (2種類)

  • Property-based (fast-check), Mutation (Stryker)

パフォーマンス・負荷テスト (2種類)

  • Performance (Lighthouse), Load (k6/Artillery)

セキュリティ・インフラテスト (3種類)

  • Security, Database, Edge Functions

国際化・SSRテスト (2種類)

  • i18n, SSR/Hydration

追加ファイル(31ファイル)

設定ファイル

  • jest.config.js, jest.setup.js, jest.polyfills.js
  • playwright.config.ts, playwright.regression.config.ts
  • jest.regression.config.js, jest.scenario.config.js
  • ci-test-jobs.yml

サンプルテスト

  • 21種類のテスト例(examples/ ディレクトリ)

ドキュメント

  • templates/testing/README.md
  • .claude/commands/setup-tests.md

使い方

# デフォルト(Standard レベル)
/setup-tests

# レベル指定
/setup-tests --level enterprise  # 全21種類

Test plan

  • フォーマットチェック通過
  • Lintチェック通過
  • テスト通過
  • 別リポジトリで /setup-tests コマンド実行テスト

🤖 Generated with Claude Code

Next.js プロジェクト向けの包括的なテスト設定テンプレートを追加。
cyber_ace_1on1 で実績のある設定を他のリポジトリに適用可能に。

## 追加テスト種別(21種類)

### 基本テスト
- Unit, Component, Snapshot, Integration, E2E

### 品質保証テスト
- API, Regression, Smoke, Contract, Scenario, Visual, A11y

### 高度なテスト
- Property-based (fast-check), Mutation (Stryker)

### パフォーマンス・負荷テスト
- Performance (Lighthouse), Load (k6/Artillery)

### セキュリティ・インフラテスト
- Security, Database, Edge Functions

### 国際化・SSRテスト
- i18n, SSR/Hydration

## レベル構成(5段階)
- minimal: Unit + Component + Snapshot
- standard: + Integration + E2E + API
- comprehensive: + Regression + Smoke + Contract
- full: + Visual + A11y + Scenario + Property-based
- enterprise: + Performance + Load + Security + DB + Edge + i18n + SSR + Mutation

## 含まれるファイル
- /setup-tests コマンド
- Jest/Playwright 設定ファイル
- 21種類のサンプルテスト
- CI/CD ワークフローテンプレート
- README ドキュメント

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Mar 5, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@keito4 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 47 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 43b8f20d-f44c-4ace-a677-2089a2d82d3e

📥 Commits

Reviewing files that changed from the base of the PR and between 83f081c and 508f34e.

📒 Files selected for processing (33)
  • .claude/commands/setup-tests.md
  • .gitleaks.toml
  • jest.config.js
  • templates/testing/README.md
  • templates/testing/ci-test-jobs.yml
  • templates/testing/examples/a11y.spec.ts
  • templates/testing/examples/api-route.test.ts
  • templates/testing/examples/api.test.ts
  • templates/testing/examples/component.test.tsx
  • templates/testing/examples/contract.test.ts
  • templates/testing/examples/database.test.ts
  • templates/testing/examples/e2e-auth.spec.ts
  • templates/testing/examples/edge-functions.test.ts
  • templates/testing/examples/hook.test.ts
  • templates/testing/examples/i18n.test.tsx
  • templates/testing/examples/integration.test.ts
  • templates/testing/examples/load.test.ts
  • templates/testing/examples/mutation.config.js
  • templates/testing/examples/performance.spec.ts
  • templates/testing/examples/property-based.test.ts
  • templates/testing/examples/regression-auth.spec.ts
  • templates/testing/examples/security.test.ts
  • templates/testing/examples/smoke.test.ts
  • templates/testing/examples/snapshot.test.tsx
  • templates/testing/examples/ssr-hydration.spec.ts
  • templates/testing/examples/visual.spec.ts
  • templates/testing/jest.config.js
  • templates/testing/jest.polyfills.js
  • templates/testing/jest.regression.config.js
  • templates/testing/jest.scenario.config.js
  • templates/testing/jest.setup.js
  • templates/testing/playwright.config.ts
  • templates/testing/playwright.regression.config.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/testing-templates

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@keito4

keito4 commented Mar 5, 2026

Copy link
Copy Markdown
Owner Author

🔍 AI Code Review (Local Hook)

Models: Codex (default) / Gemini (default)

🤖 Codex Review

指摘事項(重大度順)

  • テスト検出が機能しない: testMatch のグロブが Jest で無効な書式です(*.(ts|tsx|js) はマッチしません)。結果として多くのテストが発見されず、CI でも「テストなし」の成功になり得ます。**/__tests__/**/*.[jt]s?(x)**/?(*.)+(test|spec).[jt]s?(x) などの有効なパターンに修正が必要です。templates/testing/jest.config.js:41
  • Integration テストが恒久的に無視される: testPathIgnorePatternstests/integration/ を除外している一方、別の Jest 設定や test:integration スクリプトが用意されていないため、Integration テストが一切実行されません。除外を外すか、専用 config+script を追加してください。templates/testing/jest.config.js:42-48
  • CI で Playwright が失敗する構成: projects に Microsoft Edge を常時含めていますが、CI のインストール手順では Edge が入らないため channel: 'msedge' が失敗します。process.env.CI で除外するか、Edge のインストールを追加する必要があります。templates/testing/playwright.config.ts:57-61

全体判定: patch is incorrect
理由: テストが発見されない/実行されない設定と、CI で確実に失敗するブラウザ設定が含まれているため。
信頼度: 0.62

✨ Gemini Review

レビューを実施しました。以下に結果を報告します。

レビュー結果

以下に発見事項をリストします。

1. [重大] import文の構文エラー

a11y.spec.tsimport 文の前に不要なスペースがあり、これにより構文エラーが発生し、テストが実行できません。

  • ファイル: templates/testing/examples/a11y.spec.ts
  • 行範囲: 12-13
// 修正前
import { test, expect } from ' @playwright/test';
import AxeBuilder from ' @axe-core/playwright';

// 修正後
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

2. [改善提案] CIにおける不安定な待機処理

CIワークフロー内でサーバー起動を待つために sleep 10 が使用されています。これはサーバーの起動時間によっては不安定になる可能性があり、CIの信頼性を損なう原因となります。wait-onのようなライブラリや、ポートがリッスンを開始するまで待機するスクリプトを使用し、より堅牢な待機処理に置き換えることを推奨します。

  • ファイル: templates/testing/ci-test-jobs.yml
  • 行範囲: 96, 141

3. [改善提案] ドキュメントの重複による保守性の懸念

.claude/commands/setup-tests.mdtemplates/testing/README.md の間で、依存パッケージリストやテストレベルの比較表など、多くの情報が重複しています。これにより、将来的な更新時に修正漏れや情報の不整合が発生するリスクがあります。どちらかのファイルを信頼できる唯一の情報源(Single Source of Truth)とし、もう一方からはそれを参照する形に構成を見直すことで、保守性が向上します。

  • ファイル: .claude/commands/setup-tests.md, templates/testing/README.md
  • 行範囲: 全体

4. [改善提案] CIからのPRコメントの重複投稿

カバレッジレポートをプルリクエストにコメントするGitHub Actionスクリプトは、実行のたびに新しいコメントを投稿します。CIが再実行されると、同じ内容のコメントが複数投稿され、プルリクエストが読みにくくなる可能性があります。既存のコメントを検索して更新するロジックを追加することを検討してください。

  • ファイル: templates/testing/ci-test-jobs.yml
  • 行範囲: 42-59

5. [一貫性] CIでのテストコマンドの不統一

unit-testsジョブでは npm test -- --coverage --watchAll=false というコマンドが直接実行されていますが、setup-tests.mdで定義され、package.jsonに追加されることを意図している npm run test:ci スクリプトを使用する方が、設定の一貫性が保たれ、意図が明確になります。

  • ファイル: templates/testing/ci-test-jobs.yml
  • 行範囲: 33

総合評価

patch is incorrect

理由: パッチには、テストセットアップを自動化するための非常に詳細でよく構造化されたドキュメントとテンプレートが含まれており、開発者体験を大幅に向上させる可能性を秘めています。しかし、a11y.spec.ts のサンプルコードに構文エラーが含まれているため、このままではテンプレートとして機能しません。この重大な問題が修正されれば、パッチは非常に価値のあるものになります。

信頼度スコア: 0.9


⚠️ 修正が必要です

上記のレビューで問題が指摘されています。修正してからマージしてください。


🤖 Generated by post_pr_ai_review.py hook

- security.test.ts: Gitleaks誤検出を回避(テスト用トークンを変更)
- jest.config.js: templates/ をカバレッジ対象から除外

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2c1ac843ad

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = 'test-anon-key';

// Mock fetch for API tests
global.fetch = jest.fn();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Stop replacing global fetch with an empty mock

jest.config.js loads jest.setup.js for all default Jest runs (setupFilesAfterEnv), but this line replaces fetch with jest.fn() that returns undefined unless every test stubs it. The new API/security/contract templates call fetch and then read res.status/res.json (for example templates/testing/examples/api.test.ts), so they crash immediately instead of exercising endpoints. This makes the provided test templates fail out of the box and hides real integration behavior.

Useful? React with 👍 / 👎.

workers: process.env.CI ? 2 : undefined,
reporter: process.env.CI ? [['html'], ['list']] : 'list',
use: {
baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Use the same default host in regression Playwright config

The regression config defaults to http://localhost:3000, while the main Playwright config explicitly uses http://127.0.0.1:3000 to match Supabase site_url and keep auth redirects working. Because regression suites include auth scenarios, this host mismatch can cause redirect/cookie origin inconsistencies when PLAYWRIGHT_BASE_URL is not set, leading to regression-only login failures.

Useful? React with 👍 / 👎.

Comment on lines +111 to +115
await page.getByRole('button', { name: /ログイン/i }).click();

// アラートが表示されないことを確認
let alertShown = false;
page.on('dialog', () => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Attach the dialog handler before triggering form submit

In this XSS regression test, the dialog listener is registered only after clicking the login button. If an injected alert() fires during submit handling, Playwright emits the dialog event before the handler is attached, so alertShown stays false and the test can pass despite an actual XSS execution. Registering the listener before the click is required to avoid this false negative.

Useful? React with 👍 / 👎.

templates/testing/examples/ ディレクトリをGitleaks許可リストに追加

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@claude

claude Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

PR レビュー

テストテンプレート(21種類)の追加は非常に価値のある取り組みです。全体的な構成と段階的なレベル設計は良くできています。以下にいくつかの改善点を挙げます。


🔴 要対応

1. setup-tests.mdallowed-tools に無効なツール名

.claude/commands/setup-tests.md の front matter:

allowed-tools: ..., Task, ...

Task は有効な Claude ツール名ではありません。Agent が正しいツール名です。このままでは /setup-tests コマンドが正常に動作しない可能性があります。

2. database.test.ts のプレースホルダーが不明確

process.env.SUPABASE_SERVICE_ROLE_KEY || 'your-service-role-key'

'your-service-role-key' というプレースホルダーは gitleaks に検知される可能性があります。.gitleaks.tomltemplates/testing/examples/.* を allowlist に追加しているため今は通りますが、テンプレートを他リポジトリにコピーした際に問題になる可能性があります。コメントで「環境変数から取得すること」を明示するか、'REPLACE_WITH_SERVICE_ROLE_KEY' のような明らかなプレースホルダーに変更してください。


🟡 改善推奨

3. CI ワークフローの sleep 10 は脆弱

setup-tests.md Step 8 および ci-test-jobs.yml で:

- run: |
    npm start &
    sleep 10
    npm run test:e2e

環境によってサーバー起動時間が異なるため sleep 10 は不安定です。wait-on パッケージや npx wait-on http://localhost:3000 を使うことを推奨します:

- run: npx wait-on http://localhost:3000 --timeout 60000

4. jest.setup.jsglobal.fetch のグローバルモック

global.fetch = jest.fn();

fetchをグローバルにモックすると、意図しないAPIコールをキャッチできなくなります。テストごとに個別にモックするパターンか、msw(Mock Service Worker)の使用をコメントで推奨してください。

5. playwright.config.ts の Microsoft Edge

{
  name: 'Microsoft Edge',
  use: { ...devices['Desktop Edge'], channel: 'msedge' },
},

CI環境では Edge がインストールされていない場合が多く、テストが失敗します。process.env.CI 条件で除外するか、コメントで注意書きを追加してください。

6. load.test.ts のファイル拡張子

load.test.ts は k6 スクリプトを文字列として保持している Jest ファイルです。このパターンは混乱を招く可能性があります。ファイル名を load-k6-template.ts などにするか、コメントでこのファイルが直接実行されるものではないことを明示してください。


🔵 軽微な指摘

7. templates/testing/README.md の特定プロジェクト参照

cyber_ace_1on1 で実績のある設定を他のリポジトリに適用できます。

プライベートプロジェクト名が公開テンプレートに含まれています。汎用的な表現(例:「実プロジェクトで実績のある設定」)に変更することを推奨します。

8. .claude/commands/setup-tests.mdenterprise レベルが argument-hint に含まれていない

argument-hint: '[--level minimal|standard|comprehensive|full] [--coverage-threshold NUMBER] [--dry-run]'

enterprise レベルが argument-hint に記載されていませんが、ドキュメント本文には含まれています。一貫性のために追加してください。


✅ 良い点

  • 5段階のレベル設計が明確で段階的な導入が容易
  • .gitleaks.toml でテンプレートファイルを allowlist に追加する配慮
  • jest.config.js の coverage から templates/**/* を除外
  • playwright.config.ts でWebkit を CI環境では除外する配慮
  • 各テンプレートファイルのコメントが丁寧で分かりやすい
  • CI ワークフローテンプレート(ci-test-jobs.yml)が実用的

全体的に非常に実用的なテンプレート集です。上記の要対応点(特に Task ツール名の修正)を対処すれば、マージ可能な品質です。

@keito4
keito4 merged commit b5c3e51 into main Mar 5, 2026
16 checks passed
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.84.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@github-actions github-actions Bot added the released リリース済み label Mar 5, 2026
@keito4
keito4 deleted the feat/testing-templates branch March 20, 2026 05:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released リリース済み

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant