かし

現在開発しているプロジェクトで monorepo 化に携わっています。
もともと Storybook + reg-suit を使った VRT で運用をしていて、 monorepo 化してもこの運用を続けられないかなあと調べてたときのメモです。

monorepo とは単一のリポジトリで複数のプロジェクトが管理されているような状態を指します。
具体的な例として、次のようなディレクトリ構成が考えられます。
apps/projectA と apps/projectB は互いに独立していて、それぞれ packages に依存している状態です。

---- packages
  |   |-- ui
  |
  |-- apps
      |-- projectA
      |-- projectB

apps/projectA、apps/projectB、packages/ui のそれぞれで独立して Storybook や reg-suit を実行できるようにしたいと考えました。

かし

Visual Regression Test (VRT) とは、変更によって視覚的な影響がないか検査するリグレッションテストです。
reg-suit は VRT のためのライブラリです。
GitHub Actions などでワークフローを組むことで、定期的に VRT を実行するようにできます。
reg-suit の説明はこの記事がとてもわかりやすかったです（Circle CI を使ってる差があるけど、大きな違いではない）

GitHub にプッシュすると VRT を実行し、reg-suit から GitHub の Pull Pequest 内に実行結果のレポートを送ってくれるようにも設定できます。
（赤は PR 内の変更による差分があった Story、青は差分がない Story に対応）

同じ PR に追加でプッシュとVRT が再実行されて reg-suit のレポートが更新されるので、常に最新の VRT の結果が反映されることになります。

かし

理想的な状態

プロジェクトごとに reg-suit を実行され、その結果が GitHub の PR に独立して反映されていると嬉しいです。
上記のようなプロジェクトの構成の場合、次のようなレポートになってほしいです（※実際の通知ではなく編集した画像です）

このようになっていると、自分の現在触っている領域外に意図しない影響が出てしまわないか確認しやすくなりそうです。

かし

GitHub Actions などで実行した reg-suit の結果は、 reg-notify-github-plugin を使って GitHub に送られます。

ただしそれっぽい設定がないので GitHub の issues を見てみると、このような議論を見つけました。

最初のコメントの投稿主は僕と同じように monorepo 構成において複数のレポートを表示したいと言っています。
regconfig にプロジェクト名を追加して複数レポートに対応する案は良さそうですね。
しかし、現状解決には向かってないようです。

かし

現状、 monorepo で複数の reg-suit を実行するとどうなるのか試してみました。
具体的には以下のような構成を作りました。

---- .github
  |   |--workflows
  |       |-- reg-suit--app-a.yml
  |       |-- reg-suit--app-b.yml
  |       |-- reg-suit--ui.yml
  |
  |- packages
  |   |-- ui
  |        |-- .storybook
  |        |        |-- main.js
  |        |        |-- preview.tsx
  |        |-- package.json
  |        |-- regconfig.json
  |
  |- apps
     |-- projectA
     |     |-- .storybook
     |     |        |-- main.js
     |     |        |-- preview.tsx
     |     |-- package.json
     |     |-- regconfig.json
     |
     |-- projectB
           |-- .storybook
           |        |-- main.js
           |        |-- preview.tsx
           |-- package.json
           |-- regconfig.json

.github/workflows/reg-suit--XXX.yml ファイルは working-directory がそれぞれのプロジェクトに対応した値になってます。
これによって VRT が3つ実行されることになります。

regconfig.json には各プロジェクトごとの Story の画像を格納先を指定しておきます。
ここで同じ格納先を指定してしまうと、そもそもテストの対象が混在してしまうのですべて RED になるテストになってしまいます。

apps/projectA/regconfig.json

{
  "plugins": {
    ...(省略)
    "reg-publish-s3-plugin": {
      "bucketName": "reg-suit",
      "pathPrefix": "apps-projectA" // <- ここがプロジェクトごとに異なる
    }
  }
}

実行結果

reg-suit 自体は3つとも想定通りに動いていました。
ただし、 GitHub への結果の通知が一つのメッセージに対して複数のレポートが上書きされているような状態になりました。

これだと、一見 VRT で差分が検出されてないように見えて実は差分があった、みたいなミスが発生しそうなのでよくないですね...

調査

なんで別のワークフローなのに共通のレポートを編集しているのかなあと思って中を確認してみると、編集する対象のコメントを reg-suit が送信したか否かだけで決めていることが原因みたいです。

なのでユーザー側で頑張って通知を分割するのは難しそう

かし

storybook を合体させる方法があるらしい（まだ読んでない）

ひとまず reg-suit レベルで文化るするのは諦めてこっちを見てみようと思います。
以上

このスクラップは2022/09/01にクローズされました