React コンポーネントを生成する。「コンポーネントを作って」「UIを追加して」「画面を作って」などの指示で使用。
$ARGUMENTS コンポーネントを以下の手順で生成する。
src/components/<common or features>/$ARGUMENTS/
├── $ARGUMENTS.tsx # コンポーネント本体
├── $ARGUMENTS.module.css # スタイル
└── $ARGUMENTS.test.tsx # テスト
common/（Button, Modal, Input 等）features/（LoginForm, UserCard 等）import type { ReactNode } from 'react';
import styles from './$ARGUMENTS.module.css';
// --- Props 型定義 ---
interface ${ARGUMENTS}Props {
// TODO: $ARGUMENTS の Props を定義
// children?: ReactNode;
}
// --- コンポーネント ---
export const $ARGUMENTS = ({}: ${ARGUMENTS}Props) => {
return (
<div className={styles.root}>
{/* TODO: $ARGUMENTS の UI を実装 */}
</div>
);
};
/* $ARGUMENTS.module.css */
.root {
/* TODO: $ARGUMENTS のスタイルを定義 */
}
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { $ARGUMENTS } from './$ARGUMENTS';
describe('$ARGUMENTS', () => {
it('正しくレンダリングされる', () => {
render(<$ARGUMENTS />);
// TODO: 表示要素を検証
// expect(screen.getByRole('...')).toBeInTheDocument();
});
it('ユーザー操作に応答する', async () => {
const user = userEvent.setup();
render(<$ARGUMENTS />);
// TODO: ユーザー操作とその結果を検証
// await user.click(screen.getByRole('button'));
// expect(...).toBe(...);
});
it('Props に応じた表示が切り替わる', () => {
// TODO: 条件付きレンダリングのテスト
});
});
common/ or features/）pnpm test で動作確認するinterface で型定義したuseEffect を使っていない