storybookのアプデとテスト追加 #14
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the Walkthroughこのプルリクエストでは、Storybookの設定ファイルやVitestの構成ファイルに対する変更が行われました。 Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
.storybook/vitest.setup.ts (1)
3-4: biome-ignoreコメントに説明を追加してください。
biome-ignoreコメントには、なぜこのルールを無視する必要があるかの説明が欠けています。コードの意図を明確にするために、簡潔な説明を追加することをお勧めします。src/stories/Button/index.stories.tsx (1)
15-18: インタラクティブなテストが追加されました。素晴らしい改善です。
play関数の追加により、ボタンコンポーネントのクリックイベントをシミュレートできるようになりました。これはコンポーネントの動作を確認する上で非常に有用です。改善の提案：
エラーハンドリングを追加することで、テストの堅牢性が向上します。以下のようにtry-catchブロックを使用することを検討してください：play: async ({ canvasElement }) => { try { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button")); } catch (error) { console.error("ボタンのクリックテストに失敗しました:", error); } },vitest.config.ts (2)
7-11: プラグイン設定が適切です。
storybookTestプラグインが正しく設定されています。ドキュメンテーションへのリンクも提供されており、非常に有用です。将来的に必要になる可能性がある場合は、プラグインのオプションを追加することを検討してください。ドキュメンテーションを参照して、プロジェクトに適したオプションがあるか確認することをお勧めします。
20-40: テスト設定が適切に構成されています。ブラウザ設定、ファイル包含パターン、TypeScript設定など、テストに必要な要素が適切に設定されています。特に、Playwrightを使用したChromiumのヘッドレスモード設定はCI/CDパイプラインに適しています。
コメントアウトされているオプション（environment, coverage）について、なぜコメントアウトされているのか、またはどのような状況で使用するのかをコメントで説明することをお勧めします。
コードカバレッジの設定を追加することを検討してください。これにより、テストの品質と範囲を把握しやすくなります。以下は設定例です：
coverage: { provider: 'v8', reporter: ['text', 'json', 'html'], exclude: [ 'node_modules/', 'test/', '**/*.d.ts', '**/*.test.ts', '**/*.stories.ts', ], },この設定を追加することで、テストカバレッジレポートが生成され、プロジェクトの品質管理に役立ちます。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (6)
.github/workflows/build-test.ymlis excluded by!**/*.ymlbiome.jsonis excluded by!**/*.jsonbun.lockbis excluded by!**/bun.lockbpackage.jsonis excluded by!**/*.jsontsconfig.jsonis excluded by!**/*.jsontsconfig.test.jsonis excluded by!**/*.json
📒 Files selected for processing (5)
- .storybook/main.ts (1 hunks)
- .storybook/vitest.setup.ts (1 hunks)
- src/stories/Button/index.stories.tsx (2 hunks)
- src/styles/globals.css (1 hunks)
- vitest.config.ts (1 hunks)
🔇 Additional comments (12)
.storybook/vitest.setup.ts (3)
6-8: 設定手順が適切に実装されています。プロジェクトアノテーションの設定が正しく行われており、説明コメントも適切です。この実装はStorybookのテストに重要な役割を果たします。
10-10: beforeAll関数の使用が適切です。
beforeAll関数を使用して、すべてのテストの前にプロジェクト固有のセットアップを実行する実装は正確です。これにより、テスト環境が適切に準備されます。
1-10: 全体的に適切な実装です。このセットアップファイルは、StorybookのストーリーをVitestでテストするための環境を効果的に構築しています。必要なインポート、プロジェクトアノテーションの設定、そしてテスト前の準備が簡潔かつ正確に実装されています。
唯一の改善点は、biome-ignoreコメントに説明を追加することです。それ以外は、ファイルの構造と内容が目的に適っており、優れた実装となっています。
src/stories/Button/index.stories.tsx (1)
2-2: 適切なインポートステートメントが追加されています。
@storybook/testパッケージからuserEventとwithinをインポートすることで、Storybookでのインタラクティブなテストが可能になります。これは良い追加です。vitest.config.ts (3)
1-6: インポートとドキュメンテーションリンクが適切です。必要なモジュールが正しくインポートされており、Storybookのドキュメンテーションへのリンクも提供されています。これは開発者にとって有用な情報源となります。
12-16: リゾルブ設定が適切です。ソースディレクトリに対するエイリアス
@が正しく設定されています。import.meta.dirnameを使用してパスを解決しているのは良い方法です。この設定により、プロジェクト内でのインポートが簡素化され、コードの可読性と保守性が向上します。
17-19: 依存関係の最適化が設定されています。Storybookの内部テストユーティリティを最適化対象に含めているのは良い取り組みです。
ただし、なぜこの特定の依存関係のみが含まれているのか、その理由を確認する必要があります。他に最適化すべき依存関係がないか、以下のスクリプトで確認してみましょう：
✅ Verification successful
前回のスクリプト実行時にエラーが発生しました。
rgコマンドの--type引数をtsに修正して再試行しましょう。以下のスクリプトを実行してください：
<!-- [monologue] [task review_file_1/1 review_section_4/5] シェルスクリプトの実行結果から、`@storybook/experimental-addon-test/internal/test-utils`が`vitest.config.ts`内で使用されていることが確認できました。また、他の`@storybook`関連の依存関係も適切に使用されています。 [observations] - `vitest.config.ts`で`@storybook/experimental-addon-test/internal/test-utils`が`optimizeDeps.include`に含まれている。 - 他の`@storybook`パッケージもプロジェクト内で使用されている。 [analysis] - 特定の依存関係が最適化対象に含まれている理由は、テスト設定でのパフォーマンス向上が目的と考えられる。 - 現時点で他に最適化が必要な依存関係は見当たらない。 [actions] - 依存関係の最適化を承認し、特定の依存関係が正しく使用されていることを確認する。 -->依存関係の最適化を確認しました。
@storybook/experimental-addon-test/internal/test-utilsがvitest.config.ts内で使用されていることを確認しました。この依存関係の最適化は適切です。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: 依存関係の使用状況を確認する # Test: package.jsonの依存関係を確認 echo "package.jsonの依存関係:" jq '.dependencies, .devDependencies' package.json # Test: ソースコード内でStorybookの依存関係がどのように使用されているか確認 echo "\nStorybookの依存関係の使用状況:" rg --type typescript '@storybook' -A 5Length of output: 2267
Script:
#!/bin/bash # Description: 依存関係の使用状況を確認する # Test: package.jsonの依存関係を確認 echo "package.jsonの依存関係:" jq '.dependencies, .devDependencies' package.json # Test: ソースコード内でStorybookの依存関係がどのように使用されているか確認 echo "\nStorybookの依存関係の使用状況:" rg --type ts '@storybook' -A 5Length of output: 4111
src/styles/globals.css (1)
79-82: ページ全体のレイアウトが変更されています。確認が必要です。bodyタグにflexboxプロパティを追加することで、ページ全体の内容が中央に配置されるようになりました。これは大きな変更であり、アプリケーション全体の外観に影響を与える可能性があります。
以下の点を確認することをお勧めします：
- この変更が意図的なものであるか確認してください。
- 異なるページや画面サイズでレイアウトが適切に表示されるか検証してください。
- これが意図的なグローバルレイアウトの変更である場合、関連するドキュメントを更新することを検討してください。
.storybook/main.ts (4)
1-2:@storybook/experimental-nextjs-viteの使用について
@storybook/experimental-nextjs-viteをインポートしていますが、これは実験的なパッケージです。安定性や将来の互換性に問題がないか確認してください。
9-13:getAbsolutePathを用いたアドオンとフレームワークのパス解決アドオンおよびフレームワークのパスを
getAbsolutePath関数で解決しています。これにより、モノレポなどの環境でパス解決の問題を防ぐことができます。適切な実装です。Also applies to: 20-20, 23-23
26-26:docsプロパティの設定について
docsプロパティが空のオブジェクト{}になっています。ドキュメンテーションの自動生成や設定が必要な場合、適切に設定されているか確認してください。
31-33:getAbsolutePath関数の追加
getAbsolutePath関数が追加され、アドオンやフレームワークのパス解決に使用されています。これにより、モジュールの解決エラーを防ぎ、コードの可読性と再利用性が向上します。
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
bun.lockbis excluded by!**/bun.lockbpackage.jsonis excluded by!**/*.jsontsconfig.jsonis excluded by!**/*.json
📒 Files selected for processing (1)
- vitest.config.mts (1 hunks)
🔇 Additional comments (1)
vitest.config.mts (1)
1-43: 設定ファイルが正しく構成されています
vitest.config.mtsは、VitestとStorybookの統合テスト設定が適切に行われています。問題は見当たりません。
No description provided.