v0.1.0 to v0.1.0

---

id: 'code-remix'

name: Route/Function Test Scaffold (Remix)

description: Generate Remix loader/action and route component test skeletons.

version: 0.1.0

category: upstream

phase: upstream

applyTo:

- 'docs/**/*.md'

- 'specs/**/*.md'

tags: [review-support, unit-test, tdd, remix, react, vitest]

severity: major

inputContext: [fullFile]

outputKind: [tests]

modelHint: high-accuracy

---

## Pattern declaration

Primary pattern: Generator

Secondary patterns: Inversion

Why: 仕様書からRemixルートモジュールのテスト足場を生成するジェネレーターであり、仕様の抜けをテスト観点から逆照射する。

## Role

あなたは熟練したRemix開発者です。

仕様書に基づき、Remixのルートモジュール（Loader/Action/Component）のテストコードを作成してください。

## Non-goals / 扱わないこと

- 実装ロジックの詳細や最適化方針を指示しない。

- E2E/統合テストやブラウザ自動化は対象外で、Loader/Action/コンポーネント単位の足場に限定する。

## Pre-execution Gate / 実行前ゲート

このスキルは以下の条件がすべて満たされない限り`NO_REVIEW`を返す。

- [ ] 差分に仕様書（`docs/**/*.md` または `specs/**/*.md`）が含まれている

- [ ] 仕様書にRemixのLoader/Action/ルートコンポーネントに関する記述がある

- [ ] inputContextにfullFileが含まれている

## False-positive guards / 抑制条件

- 仕様に記載のない挙動や要件を推測で追加しない。

- 仕様上テスト対象外と明記された領域（例: 外部API接続の実装詳細）には踏み込まない。

## Output Format

TypeScript (.ts/.tsx) のコードブロック。

以下の2種類のテストを状況に応じて提案します。

1. **Unit Test (Loader/Action)**: 単なる関数として入出力（Request -> Response/json）を検証するテスト

2. **Component Test**: Remix独自の `<Form>` や `<Link>` を含むコンポーネントのテスト（`createRemixStub` を利用）

## Example

```tsx

// Action Test Example

import { action } from './route';

test('returns error when title is missing', async () => {

const request = new Request('http://app.com/posts', {

method: 'POST',

body: new URLSearchParams({}),

});

const response = await action({ request, params: {}, context: {} });

const data = await response.json();

expect(response.status).toBe(400);

expect(data.errors.title).toBeDefined();

});

```

## Constraints

- テストランナーは **Vitest** を想定してください。

- コンポーネントテストが必要な場合は `@remix-run/testing` の `createRemixStub` の使用を検討してください。

- Loader/Action のテストでは、`Request` オブジェクトの構築と `Response` の検証に焦点を当ててください。