はじめに

こんにちは、エンジニアのkeitaMaxです。

Test runnerを使用してStorybookのテストをGitHub Actionsで実行してみようと思います。

インストール

以下コマンドでTest runnerをインストールします。

npm install @storybook/test-runner --save-dev

GitHub Actionsの設定

ymlファイルを以下のように設定しました。

name: unitTest

on: [pull_request]

jobs:
  phpunit:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    defaults:
      run:
        working-directory: ./src
    steps:
      - uses: actions/checkout@v2
      - name: npm
        run: npm ci
      - name: Build Storybook 
        run: npm run build-storybook
      - name: Serve Storybook
        run: npx serve storybook-static -l 6006 &
      - name: Install Playwright with dependencies
        run: npx playwright install --with-deps
      - name: storybookTest
        run: npm run test-storybook

LaravelとInertiaとReactとDockerで開発していたソースなのでworking-directory: ./srcって感じになってます。

package.json２つあって、以下のように設定しています。

package.json

  "scripts": {
    "prepare": "husky",
    "ci": "npm --prefix ./src ci",
    "lint": "npm --prefix ./src run lint",
    "build": "npm --prefix ./src run build",
    "type-check": "npm --prefix ./src run type-check",
    "test-storybook": "npm --prefix ./src run test-storybook"
  }

src/package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "storybook": "storybook dev -p 6006",
    "lint": "eslint ./resources/js",
    "lint:fix": "eslint --fix ./resources/js",
    "type-check": "tsc --noEmit",
    "build-storybook": "storybook build",
    "test-storybook": "storybook dev -p 6006 & wait-on http://localhost:6006 && test-storybook"
  },

これを実際にPRを作成しGitHub上で実行してみると、ちゃんと動いていることがわかります。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考