chore: RSCのテスト用ページで、コンポーネントをレンダリングするところまで検証するように修正 #4997
Conversation
s-sasaki-0529
requested review from
moshisora and
hiroki0525
and removed request for
a team
commit: |
| 'RemoteDialogTrigger', | ||
| 'TableReel', | ||
| 'BulkActionRow', | ||
| 'Tooltip', |
There was a problem hiding this comment.
RSC対応してると思ったが全然してなかったコンポーネントたち。
良くみたらラジオボタンとかダイアログトリガーとかそれはそうって感じでしたね。
| @@ -52,7 +52,6 @@ const CLIENT_COMPONENTS = [ | |||
| 'Calendar', | |||
| 'FormControl', | |||
| 'Th', | |||
| 'Cell', | |||
There was a problem hiding this comment.
いくつか既に存在していないコンポーネントが紛れていたので削除。
There was a problem hiding this comment.
このリストから漏れてるコンポーネントについては別途追加します。
(間に合ったらこのPRに混ぜますが、次時間取れるときにやるので、構わずレビューしちゃってOKです)
| @@ -116,7 +112,7 @@ 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(/Server Error|Unhandled Runtime Error/)).toBeVisible() | |||
There was a problem hiding this comment.
レンダリングのタイミングでRSC違反が発生した場合は Unhandled Runtime Error になるので期待値を調整。
| <div>Success: AccordionPanel</div> | ||
| <AccordionPanel /> | ||
| </> | ||
| ) |
There was a problem hiding this comment.
こんな感じにコンポーネントのレンダリングまでやるように。
流石にここまでやってエラーが出なかったらRSC対応してると言って良いでしょう。
| onClickAction={() => {}} | ||
| onClickClose={() => {}} | ||
| isOpen | ||
| /> |
There was a problem hiding this comment.
必須propsがある場合は、それを省略したせいで発生したエラーと区別がつかなくなるので、温かみのある手作業ですべて設定してます。
| @@ -66,7 +65,6 @@ const CLIENT_COMPONENTS = [ | |||
| 'Header', | |||
| 'NotificationBar', | |||
| 'TabBar', | |||
| 'FormGroup', | |||
There was a problem hiding this comment.
いくつか既に存在していないコンポーネントが紛れていたので削除。
このリストから漏れてるコンポーネントについては別途追加します。
| @@ -1,6 +1,10 @@ | |||
| import React from 'react' | |||
There was a problem hiding this comment.
[A]
現代の React だと不要なやつです！
ただ tsconfig.json と ESLint の設定が必要になるやつなので横着して入れてしまいました。
関連URL
前回PR
概要
前回PRにて、コンポーネントがRSCレンダリング可能かを検証するページを用意してE2Eで担保するようにしたが、検証方法が不十分で判定が正しく出来ていなかったことがわかったため、判定方法を見直す。
変更内容
変更前は、コンポーネントを import して、コンソール出力するだけだった。
これだとモジュールのトップレベルで useContext などの依存が発生しているコンポーネントの場合はその時点でエラーとなるが、コンポーネントをレンダリングするタイミングで初めて useState や useRef に依存する場合のコンポーネントを検知できていなかった。
そこで、本PRではすべてのコンポーネントについて、最小限のレンダリングを行うように修正して、E2Eテストの期待値も見直した。
確認方法
CIが通ればOKです。ローカルで検証する場合は前回PRを参照してください。