🍑

Storybook の Test runner を使った Interaction tests によるテストアプローチ

2025/01/24に公開

Storybook によるテストアプローチ

  • Storybook の v6.4 から play 関数が導入され、v6.5 から Interaction tests が可能になった
  • これによって Story 上でテストを実行するだけでなく、実行したテストの動作確認がブラウザ上で可能に
  • 今までは Jest や Vitest 上で Testing Library を利用する際、DOM 操作の視覚的な確認が難しく感じかったが、Interaction tests を利用すればブラウザ上で簡単に確認できる
  • さらに、Chromatic を利用することで、Storybook 上で記述した Interaction tests を VRT(Visual Regression Test) に流用することもできる

Storybook の Test runner

  • Storybook 内のすべてのストーリーを実行可能なテストに変換するツール
  • コンポーネントの外観だけでなく、振る舞いまでを自動的に検証することができるようになる

https://storybook.js.org/docs/writing-tests/test-runner

特徴

  • 内部では Playwright が使用されている

We also wanted the tests to run in the same browsers that you use to view your stories and ultimately your production website. To achieve this we use Playwright, the cross-browser successor to Puppeteer. These tests run in parallel and with comparable performance to a lower-fidelity JSDOM-based test.
ストーリーや最終的には本番 Web サイトの表示に使用するのと同じブラウザでテストを実行したいと考えました。これを実現するために、Puppeteerの後継となるクロスブラウザのPlaywright を使用しました。これらのテストは並行して実行され、忠実度の低いJSDOMベースのテストと同等のパフォーマンスを実現します
https://storybook.js.org/blog/interaction-testing-with-storybook/

  • クロスブラウザのテストコマンド例
# cross-browser testing
npm run test-storybook --browsers chromium firefox webkit
  • Jest や Testing Library を用いてテストを記述する

Rather than trying to recreate all of this ourselves, we built Storybook test runner on top of Jest itself.
Jest 自体の上に Storybook テスト ランナーを構築しました
https://storybook.js.org/blog/interaction-testing-with-storybook/

  • 上記、Playwright と Jest を利用して、ヘッドレスブラウザ上でテストを実行する
  • すべてのストーリーが正常にレンダリングされ、インタラクションが意図通りに動作するかを検証できる
  • CI/CD パイプラインに組み込むことで、自動テストも実現できる(詳細は下に続く)

Jest との比較

  • Jest やそれに似たツールは、一般的なテストを実行するのに最適
  • しかし、これらのテストは JSDOM を使用して Node で実行するため、デバッグするには、HTML の塊を調べる必要がある
  • コードを 2 つのファイル (ストーリー ファイル内のテストケースとテストファイル内のアクションとアサーション) に分割すると、可動部分が増えてしまう
  • Storybook インタラクションテストでは、ストーリーファイル自体にテストを記述できるため、ワークフローが効率化される
  • テストはブラウザーで実行され、GUI を使用してテストを視覚化およびデバッグできる

https://storybook.js.org/blog/interaction-testing-with-storybook/

利点

  • 効率的なテスト: 手動でストーリーを確認する手間を省き、自動化されたテストを実行できる
  • 包括的な検証: レンダリングエラーの検出からインタラクションテストまで、幅広いテストが可能
  • 開発ワークフローの改善: テストのフィードバックをリアルタイムで受けながら、コンポーネント開発を進められる
    • --watch option がある

注意

However, certain behaviors are impossible to achieve via the play function, which executes in the browser. For example, if you want the test-runner to take visual snapshots for you, this is possible via Playwright/Jest but must be executed in Node.
https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api

  • Node.js で実行する必要がある
    • 先述の通り内部でJestとPlaywrightを使用しており、Node.js環境での実行を前提としている
    • Bunを使用した環境でStorybookのテストランナーを直接実行することは困難
Bunの環境でStorybookのテストを実行するための代替方法
  1. Node.jsとnpmを併用する:
# Bunでプロジェクトの依存関係をインストール
bun install

# Node.jsを使用してテストランナーを実行
npx test-storybook
  1. Bunのテスト機能を活用する:
  • Bunには組み込みのテストランナーがあり、これを使用してStorybookのコンポーネントをテストできる
test/storybook.test.js
import { test, expect } from "bun:test";
import { render } from "@testing-library/react";
import MyComponent from "../stories/MyComponent.stories";

test("MyComponent renders correctly", () => {
  const { getByText } = render(<MyComponent.Default />);
  expect(getByText("Hello, Storybook!")).toBeDefined();
});
bun test

3.CIでのテスト実行:
CI環境では、Node.jsを使用してテストを実行することができます。

name: Storybook Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build-storybook
      - run: npm run test-storybook

注意:Bunのテストランナーは完全なJest互換ではないため、一部の機能が利用できない可能性がある
https://blog.nnn.dev/entry/2024/02/26/110000

設定

  • @storybook/test-runner のインストール
    • 推奨バージョン: Storybook v7.0 以上
bun add -D @storybook/test-runner
  • Storybook を起動した状態で、別のターミナルでテストを実行
bun test-storybook

https://storybook.js.org/docs/writing-tests/test-runner#setup

参考になりそう:
https://blog.mmmcorp.co.jp/2023/08/18/storybook-test-runner-practice/

Test runner を使って Storybook のテストを CLI で実行する

  • Storybook 上で記述した Interaction tests を CLI で実行することもできる

https://qiita.com/keitaMax/items/766811dd06042e8c66bd

Test runner を CI 上で実行する

code
.github/workflows/storybook-tests.yml
name: Storybook Tests

on: deployment_status

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
      - name: Install dependencies
        run: yarn
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run Storybook tests
        run: yarn test-storybook
        env:
          TARGET_URL: '${{ github.event.deployment_status.target_url }}'

https://storybook.js.org/docs/writing-tests/test-runner#set-up-ci-to-run-tests

参考になりそう

https://blog.cybozu.io/entry/2023/05/29/090000

https://zenn.dev/azukiazusa/articles/storybook-interaction-testing#インタラクションテストの作成

https://zenn.dev/sora_kumo/articles/8a79531e726b29

Discussion