chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985

s-sasaki-0529 · 2024-10-08T00:37:39Z

概要

SmartHR UI では、Next.js 向けのサーバーコンポーネント(RSC)として可能な限り使用できるように現在取り組んでいます。

その中で、どのコンポーネントがRSCとして使えるかを機会的に洗い出したり、RSCで使えたものが突然使えなくなるデグレを避けるために、RSCとして使える・使えないを自動テストで担保する仕組みが必要だと考えました。

そこで、E2Eテストの形式で、Next.js 上でサーバーコンポーネントとして各コンポーネントをインポートした際に、エラーが発生する・しないをテストできるようにします。

変更内容

Next.js のサンドボックス内に、smarthr-ui が提供するコンポーネントそれぞれに依存したページを作成する
Playwright を利用して、それぞれのページ(コンポーネント) にアクセスし、エラーが発生するかしないかを検証するE2Eテストを追加する
テストのCIワークフローを作成する

確認方法

ローカルではやや面倒ですが、以下の手順で確認できます。

依存パッケージの更新

# ~/smarthr-ui
$ pnpm install

smarthr-ui 側のビルドとローカルパッケージング

# ~/smarthr-ui/packages/smarthr-ui
$ npx yalc publish

sandbox 側でローカルパッケージの追加と開発環境の起動

# ~/smarthr-ui/sandbox/next
$ npx yalc add smarthr-ui
$ pnpm dev

(開発環境は起動したまま) E2E テストの実行

# ~/smarthr-ui/sandbox/next
$ pnpm playwright test

CI では以下のようなジョブが動いてます。
https://app.circleci.com/pipelines/github/kufu/smarthr-ui/22380/workflows/4b957fe9-8d8e-41f2-b7c9-a47d53190cb8/jobs/77375

pkg-pr-new · 2024-10-08T00:38:42Z

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4985

commit: 1273817

s-sasaki-0529 · 2024-10-08T01:51:50Z

.circleci/config.yml

@@ -32,7 +32,7 @@ commands:
      - run: |
          sudo corepack enable
          sudo corepack prepare
-          pnpm ui install
+          pnpm install


smarthr-ui パッケージだけでなく sandbox まで含めて全部インストールします。
sandbox は他のジョブでは不要なため無駄は生じますが、どのみちキャッシュが CircleCI に残るので問題はなさそう。

s-sasaki-0529 · 2024-10-08T01:56:53Z

.circleci/config.yml

+      - run:
+          name: build and store smarthr-ui package
+          working_directory: packages/smarthr-ui
+          command: npx yalc publish


現状のSandboxだと、以下みたいに pnpm workspace 使って、開発中の smarthr-ui パッケージを取り込んでます。

smarthr-ui/sandbox/next/package.json

Line 15 in 03210ba

"smarthr-ui": "workspace:*"

ただ pnpm の仕様なのか Next の仕様なのか定かでないんですが、このやり方だと

import { Text } from 'smarthr-ui'

とだけ読み込んでも、ツリーシェイキングとか関係なくエントリーファイル(index.ts) からすべてのモジュールが読み込まれてしまって、一つでもクライアントコンポーネントがあるとその時点でアウトという事象が発生してしまいます。。

ので、yalc を使ってローカルにパッケージをビルドします。yalc ビルド版を使うことで、上記のようなコードを書いた場合には意図通りに Text コンポーネントのみが読み込まれ、サーバーコンポーネントとして利用できます。

CI で動かす分には手順通りに常に実行してくれるから良いんですが、ローカルで試したいときにこの手順が煩雑すぎるので、 "smarthr-ui": "workspace:*" のままでも RSC を動かせるソリューション募集中です。

smarthr-ui/lib または smarthr/esm を指定してもダメだった。

下記の２つの方法を試してみると良いかもです

optimizePackageImports に smarthr-ui を追加

バレルファイルはツリーシェイキングに対応していないみたいで、自前で optimizePackageImports を設定して上げる必要があるっぽい？

pnpm build && pnpm start でサーバーを起動する

pnpm dev でNext.jsのサーバーを起動していると思うのですが、上記のコマンドでプロダクション環境と同等のサーバーを起動するとツリーシェイキングが効くかも？

うひょー！試してみますね！

んあー、惜しいですね…。

const nextConfig = { experimental: { optimizePackageImports: ['smarthr-ui'], }, }

で、確かに開発サーバー起動後に、RSC対応コンポーネントのページを開いてもそのモジュールしか読み込まれずにRSCレンダリングに成功するんですが、その後RSC非対応コンポーネントのページを開くと useEffect とかが読み込まれてしまって、以降は RSC対応コンポーネントのページを開いてもエラーが出続けます…。

エラーが出ることを正常としてる本PRのユースケースがハックすぎるだけで、このオプション自体は有用そうですね！

pnpm build のほうは、ビルド時点で、RSCで useEffect とかへの依存があることがエラーとして報告されてしまうので、こちらは残念ながら駄目そうです。

s-sasaki-0529 · 2024-10-08T02:00:12Z

.circleci/config.yml

+          working_directory: sandbox/next
+          command: |
+            pnpm playwright install chromium
+            pnpm playwright test


やや惰性で Playwright を使った E2E テストにしてます。
現状存在する testcafe を用いた E2E テストは近いうちに廃止するつもりです。

ただ本PR時点での使い方だと、Playwright を使うほどでもない気がする。Vitest でも済ませられそうだし極論 curl してステータスコード見るだけでも完結しそう。

s-sasaki-0529 · 2024-10-08T02:01:25Z

sandbox/next/e2e/rsc.test.ts

+/**
+ * サーバーコンポーネントとして利用できるコンポーネント一覧
+ */
+const SERVER_COMPONENTS = [


今のところサーバーコンポーネントとして動作するコンポーネントたち。
これを増やしていくのが今期の目標。(なお残り３ヶ月)

s-sasaki-0529 · 2024-10-08T02:02:03Z

sandbox/next/e2e/rsc.test.ts

+/**
+ * サーバーコンポーネントでは利用できないコンポーネント一覧
+ */
+const CLIENT_COMPONENTS = [


サーバーコンポーネントでは動かないコンポーネントたち。

仕様上クライアントコンポーネントで当然なものと、工夫次第でサーバーコンポーネントにできるものが混在してるのでそこは整理したい。

s-sasaki-0529 · 2024-10-08T02:03:41Z

sandbox/next/e2e/rsc.test.ts

+test.describe('RSC対応コンポーネントがRSCで利用できること', () => {
+  for (const component of SERVER_COMPONENTS) {
+    test(component, async ({ page }) => {
+      await page.goto(`http://localhost:3000/rsc_test/${component}`)
+      await expect(page.getByText(`Success: ${component}`)).toBeVisible()
+      await expect(page.getByText('Server Error')).not.toBeVisible()
+    })
+  }
+})
+
+test.describe('RSC非対応コンポーネントはRSCでエラーになること', () => {
+  for (const component of CLIENT_COMPONENTS) {
+    test(component, async ({ page }) => {
+      await page.goto(`http://localhost:3000/rsc_test/${component}`)
+      await expect(page.getByText('Server Error')).toBeVisible()
+      await expect(page.getByText(`Success: ${component}`)).not.toBeVisible()
+    })
+  }
+})


この辺が実際に RSC として使えるかどうかをテストしてるシナリオ。

エラーが出る=RSCに対応していないというのを検証するのはなかなか尖ったアプローチだなとは思ってます。コスト重視で言えば、RSC対応コンポーネントをすべて列挙したページを１個用意して、そこがレンダリングできればOKぐらいでも良いと思います。

が、「本当はRSCで使えるのに気づかれず使えない扱いされている」という場面を、少なくとも今期中は見落としたくないので、コストを払ってでも確実にチェックするようにしてます。将来的にはもっとシンプルにしても良いかも。

コンポーネントごとに test を作らずに test.step でステップ分けすれば一々ブラウザコンテキストを作り直さずに済むので高速なんですが、テストの視認性や安定性を考慮して今の形にしました。

s-sasaki-0529 · 2024-10-08T02:07:00Z

sandbox/next/package.json

    "@types/node": "^20.16.10",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.0",
-    "eslint-config-next": "^14.2.14",


やや別件なんですが、　pnpm install でモノレポ内のすべてのパッケージをインストールした結果、sandbox と smarthr-ui それぞれで ESLint まわりのバージョン不整合が発生してました。

ちゃんとバージョン管理する必要があるんだろうなぁと思いつつ、現状では sandbox に対してリンターを書けたい理由は特にないので削除しちゃいます。

s-sasaki-0529 · 2024-10-08T02:07:34Z

sandbox/next/playwright.config.ts

+    locale: 'ja-JP',
+    timezoneId: 'Asia/Tokyo',
+  },
+})


適当にプロダクト側から持ってきて調整した Playwright の設定。

s-sasaki-0529 · 2024-10-08T02:08:57Z

sandbox/next/src/app/rsc_test/AccordionPanel/page.tsx

+export default function AccordionPanelPage() {
+  console.log(AccordionPanel)
+  return <div>Success: AccordionPanel</div>
+}


実際に RSC で動くかを試すためのページ。

use client を指定してないのでこのページはサーバーコンポーネントになります。
各コンポーネントは実際に描画せずとも、import してログ出力するだけで依存が発生するので、RSCで使えるかの識別ができます。

s-sasaki-0529 · 2024-10-08T02:11:45Z

.circleci/config.yml

+      - run:
+          name: Setup Next.js sandbox
+          working_directory: sandbox/next
+          command: npx yalc add smarthr-ui


このコマンドで "smarthr-ui": "file:.yalc/smarthr-ui" みたいにローカルビルドしたバージョンがインストールされます。

s-sasaki-0529 · 2024-10-08T02:13:02Z

sandbox/next/src/app/rsc_test/Icon/page.tsx

@@ -0,0 +1,6 @@
+import { FaAddressBookIcon } from 'smarthr-ui'


ここだけちょっと個別対応。 Icon というコンポーネントはないため、代表して FaAddressBookIcon を使ってます。流石にアイコンごとに使える使えないが変わるということはないと思うので。

ちなみにこれは

chore: SmartHR UIコンポーネントからuseThemeの依存をなくす #4975

でRSC対応されるので、マージされたらテストが落ちるようになるはず。

s-sasaki-0529 · 2024-10-08T02:44:06Z

.circleci/config.yml

+  e2e-test:
+    executor: node-active-lts-browsers
+    working_directory: ~/repo
+    resource_class: large


Next.js の開発サーバーを起動してリクエストを受け取りまくるって構造の都合上、large (4CPU) を使います。ややお高いですが、デカいプロダクトが何個もある org 全体で見たら誤差程度なので…。

uknmr

素敵!

uknmr · 2024-10-08T23:49:01Z

sandbox/next/src/app/rsc_test/Dropdown/page.tsx

ask: DropdownTrigger や DropdownContent など、組み合わせて使う想定のコンポーネントは対象に含めなくて大丈夫ですか?
Dialog にもありそう。
どこまでやるかの決めだと思いますが、Table や TabBar など展開されてるものとそうでないものの違いが気になりました。

全コンポーネントを対象にする気でいて、同じくStorybook リライトでも全コンポーネントやるだろうからと Story 充足基準シートのほうからコピペしちゃったんですが、こちらも網羅しているわけではなかったですかね…？

あああ、なるほど。Story 充足基準シートでは管理の都合上、一部名寄せしています:pray:
親コンポーネントとしては網羅されてるんですが、Composite して使うコンポーネントに関しては不完全です。

なるほどー。Storybook は親単体で使うことはありえないってパターンはありますが、今のRSC の検証としては全てをチェックしないといけないので調整が必要ですね。

一旦このPRでは仕組みを作ったとこまででマージして、リストの手直しを別途行います！

chore: RSCのテストを追加

81cad54

s-sasaki-0529 added 9 commits October 8, 2024 09:59

chore: CIワークフローを追加

f7c3445

chore: 末尾改行を入れる

027a99a

chore: sandbox 側から eslintを削除

3332200

chore: ブラウザインストールを追加

495c6cc

chore: 実行タイミングを調整

28b9527

chore: CI調整

74d6f3e

Merge remote-tracking branch 'origin/master' into rsc-test

a9487a3

chore: CI調整

3efff16

chore: Icon 個別対応

e47bca9

s-sasaki-0529 commented Oct 8, 2024

View reviewed changes

s-sasaki-0529 added 2 commits October 8, 2024 11:32

chore: 調整

8e2cabd

chore: 調整

8df50c2

s-sasaki-0529 marked this pull request as ready for review October 8, 2024 02:37

s-sasaki-0529 requested a review from a team as a code owner October 8, 2024 02:37

s-sasaki-0529 requested review from misako0927 and uknmr and removed request for a team October 8, 2024 02:37

s-sasaki-0529 added 2 commits October 8, 2024 11:39

chore: largeクラスを使う

a42133c

chore: CI調整

1273817

s-sasaki-0529 commented Oct 8, 2024

View reviewed changes

s-sasaki-0529 requested a review from a team October 8, 2024 02:45

uknmr approved these changes Oct 8, 2024

View reviewed changes

s-sasaki-0529 merged commit fbf26ec into master Oct 9, 2024
38 checks passed

s-sasaki-0529 deleted the rsc-test branch October 9, 2024 22:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985

chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985

s-sasaki-0529 commented Oct 8, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

hiroki0525 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

s-sasaki-0529 Oct 8, 2024

uknmr left a comment

uknmr Oct 8, 2024

s-sasaki-0529 Oct 9, 2024 •

edited

Loading

uknmr Oct 9, 2024

s-sasaki-0529 Oct 9, 2024

		@@ -0,0 +1,6 @@
		import { FaAddressBookIcon } from 'smarthr-ui'

chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985

chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985

Conversation

s-sasaki-0529 commented Oct 8, 2024 • edited Loading

関連URL

概要

変更内容

確認方法

pkg-pr-new bot commented Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiroki0525 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

s-sasaki-0529 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

s-sasaki-0529 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

uknmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

s-sasaki-0529 Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

s-sasaki-0529 commented Oct 8, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 8, 2024 •

edited

Loading

hiroki0525 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 8, 2024 •

edited

Loading

s-sasaki-0529 Oct 9, 2024 •

edited

Loading