【Storybook】テストの種類

TEST of Storybook

１. visual-testing

• 可視性テスト (Visual Testing)

目的: コンポーネントや画面の外観やレイアウトが変更された場合に、ビジュアルの一貫性を確認します。スクリーンショットやビジュアル差分の比較を行って、デザインやUIの変更を検知します。

２. Testing composite components

• ユニットテスト (Unit Testing)
• 統合テスト (Integration Testing)

目的: 複数のコンポーネントが組み合わさったコンポジットコンポーネントのテストを行います。各コンポーネントの単体テストや相互作用のテストを組み合わせて、結合された状態での正常な動作を確認します。

３. Testing component interactions

• ユニットテスト (Unit Testing)
• 統合テスト (Integration Testing)

目的: コンポーネント間の相互作用やデータの流れをテストします。コンポーネントが適切に連携し、正しいデータのやり取りが行われることを確認します。

４. Accessibility testing with Storybook

• 可視性テスト (Visual Testing)
• アクセシビリティテスト (Accessibility Testing)

目的: アクセシビリティガイドラインに基づき、コンポーネントやアプリケーションがアクセシブルな状態であるかどうかをテストします。色のコントラスト、キーボード操作、スクリーンリーダーのサポートなどが含まれます。

５. Testing user flows

• 統合テスト (Integration Testing)
• ユーザーフローテスト (User Flow Testing)

目的: ユーザーのフロー（操作手順）を再現し、アプリケーション全体の機能やワークフローをテストします。ユーザーが特定のアクションを実行し、予想される結果を確認します。

６. How to automate UI tests with Github Actions

• 自動化テスト (Automated Testing)

• 統合テスト (Integration Testing)

目的: テストを自動化して、継続的なテストフローを確保します。ユニットテスト、統合テスト、可視性テストなど、さまざまなテストタイプを自動化することができます。

７. UI Testing Playbook (実践)

• ユニットテスト (Unit Testing)
• 統合テスト (Integration Testing)
• 可視性テスト (Visual Testing)
• アクセシビリティテスト (Accessibility Testing)
• 自動化テスト (Automated Testing)

８. Snapshot tests

目的: コンポーネントやUIの変更を追跡し、それらの変更が意図したものであるかを確認すること

※ Storyshotsは将来的に廃止され、ユーザーはテストランナーや他のオプションに移行する予定

テストと使用するツールと内容

1. ユニットテスト (Unit Testing):

   • ツール: Jest, Mocha, Jasmine, Ava
   • 内容: 単一のコンポーネントや関数などの個々のユニットが、予期した動作をするかどうかを検証します。入力と出力をテストし、コンポーネントや関数の振る舞いを確認します。

2. 統合テスト (Integration Testing):

   • ツール: Cypress, Selenium, Puppeteer
   • 内容: 複数のコンポーネントや機能が結合された状態での動作をテストします。異なるコンポーネント間の相互作用やデータの流れ、APIとのやり取りなどを確認します。

3. 可視性テスト (Visual Testing):

   • ツール: Storybook Addon Visual Regression, Chromatic, Percy, Applitools
   • 内容: コンポーネントや画面の外観やレイアウトが変更された場合に、ビジュアルの一貫性を確認します。スクリーンショットやビジュアル差分の比較を行って、デザインやUIの変更を検知します。

4. アクセシビリティテスト (Accessibility Testing):

   • ツール: Axe, pa11y, Storybook Addon Accessibility
   • 内容: アクセシビリティガイドラインに基づき、コンポーネントやアプリケーションがアクセシブルな状態であるかどうかをテストします。色のコントラスト、キーボード操作、スクリーンリーダーのサポートなどが含まれます。

5. 自動化テスト (Automated Testing):

   • ツール: Jest, Cypress, Selenium, Puppeteer
   • 内容: テストを自動化して、継続的なテストフロ

ーを確保します。ユニットテスト、統合テスト、可視性テスト、アクセシビリティテストなど、さまざまなテストタイプを自動化することができます。

６. ユーザーフローテスト (User Flow Testing):

• ツール: Cypress, Selenium, Puppeteer
• 内容: ユーザーのフロー（操作手順）を再現し、アプリケーション全体の機能やワークフローをテストします。ユーザーが特定のアクションを実行し、予想される結果を確認します。

７. スナップショットテスト (Snapshot Testing):

• ツール: Jest, React Testing Library, Enzyme
• 内容: コンポーネントのレンダリング結果やUIの変化をキャプチャし、スナップショットと比較してテストします。変更があった場合には差分が表示され、テストが失敗します。