Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合

63.3K Views

January 20, 24

#Next.js #App Router #React Server Component #Server Actions #テスト戦略

スライド概要

BuriKaigi2024 https://burikaigi.dev/speakers/024/

Junsei Nagao

@junseinagao

スライド一覧

Webフロントエンドエンジニア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

React Hook Form と Zod を使うときの注意点

Junsei Nagao 29.9K

いいね❤️を集めるアウトプットをするには

Junsei Nagao 3.8K

RemixはポストRailsを果たせるか?

Junsei Nagao 1.7K

ASTなにも分からないけどmdast-util-from-scrapbox作ってる

Junsei Nagao 1.7K

VS CodeのProfiles機能を紹介します

Junsei Nagao 779

Firebase Data Connect・Firebase App Hosting を試す

Junsei Nagao 742

各ページのテキスト

#burikaigi_m ● ⾃⼰紹介ながおじゅんせい⻑尾准誠株式会社エイチームライフデザインデザイン開発本部引越しプロダクト開発部各種サービス/junseinagao twitter.com/junpai_code 経歴 ● 2022年9⽉~ エイチームライフデザインに中途⼊社引越し⾒積もり⽐較サービスに関連する新規サービス開発反応⾒るのが好きなので、Xでセッションの感想をつど投げておいてくださると嬉しいです。 © 2023 Ateam LifeDesign Inc. 2

● 予備知識 #burikaigi_m React Server Component ● Next.js App Routerで使えるサーバーコンテキストで実⾏できる処理を記述できるReactコンポーネント ● サーバーコンテキストで計算されたコンポーネントがクライアントに配信されるので、Node.jsやサーバーコンテキストに依存した処理をコンポーネントと合わせて記述できる ● Next.js Pages RouterのgetServerSideProps, getStaticPropsのAPIの表現を変えたモノとも⾔える © 2023 Ateam LifeDesign Inc.

● 予備知識 #burikaigi_m Route Handlers ● Next.js Pages RouterでAPI Routesと呼ばれているAPI ● Next.jsに柔軟に各種HTTPエンドポイントを作れる (クレジット：図は https://nextjs.org/docs/app/building-your-application/routing/route-handlers より 2024年01⽉19⽇アクセス © 2023 Ateam LifeDesign Inc. )

● 予備知識 #burikaigi_m Server Actions ● Next.jsでは、フォームからのリクエストを受けるエンドポイント(Web API) を作成するのを助けてくれるAPI ● formタグのaction属性に関数を渡す表現⽅法で実装できる ● クライアントコンポーネントと⼀緒にサーバーコンテキストの処理を扱える注) 元々、Next.jsではなくreact@canaryの持つAPI © 2023 Ateam LifeDesign Inc.

● 本⽇のアジェンダ #burikaigi_m RSC,Server Actionsを採⽤したプロジェクトのテスト実装はどのように進めていけば良いのか...という話をします 1. React Server Component (RSC), Server Actionsを採⽤して開発したプロダクトの事例‧構成の紹介 2. フロントエンドアプリケーションのテスト戦略 3. テスト実装の例とポイント 4. 質疑応答 © 2023 Ateam LifeDesign Inc.

10.

11.

12.

● 開発したプロダクトの事例‧構成の紹介 #burikaigi_m 引越しに関するTodo管理アプリケーション (機能) 引越しするユーザーが⾃⾝に合わせて最適化された Todoを管理できるアプリ ● 簡単なフォームを提出すると専⽤のTodoリスト(マイページ)にアクセスできるようになる ● それぞれのタスクのチェック‧アンチェックができる ● © 2023 Ateam LifeDesign Inc. 「編集」から引越し予定⽇を更新できる

13.

14.

● 開発したプロダクトの事例‧構成の紹介 #burikaigi_m 引越しに関するTodo管理アプリケーション (実装) Route Handler でタスクチェックAPIを作成 + router.refresh() で画⾯を更新 ( “next/navigation”のrouter.refresh()でクライアントのReact Stateを保ったまま、 RSCの再計算と配信ができる ) © 2023 Ateam LifeDesign Inc.

15.

16.

17.

#burikaigi_m ● 開発したプロダクトの事例‧構成の紹介引越しに関するTodo管理アプリケーション (設計) 配信 ● ● AWS Fargate + CDN 同⼀VPC内でPostgresqlに接続認証 ● NextAuthで作成したAPIで Cookieを⽤いたセッション管理を⾏うデータ取得‧更新 ● ● © 2023 Ateam LifeDesign Inc. データ取得は、React Server Component データ更新は、Route HandlerかServer Actions を⽤いてサーバーコンテキストを⽤意して都度 Prismaで⾏う。

18.

19.

● フロントエンドアプリケーションのテスト戦略このアプリケーションのテスト設計を考える ● E2Eテスト (Playwright) ● UIテスト、コンポーネントテスト (Storybook, Storybook play function, React Testing Library) ● DB接続を伴うロジックの結合テスト (Jest) ● カスタムフックス含むロジックの単体テスト (Jest, React Testing Library) © 2023 Ateam LifeDesign Inc. #burikaigi_m

20.

#burikaigi_m ● フロントエンドアプリケーションのテスト戦略このアプリケーションのテスト設計を考える ● E2Eテストフロントエンドアプリケーションにおけるテスト実装の鍵 (Playwright) ● UIテスト、コンポーネントテスト (Storybook, Storybook play function, React Testing Library) ● DB接続を伴うロジックの結合テスト (Jest) ● カスタムフックス含むロジックの単体テスト (Jest, React Testing Library) © 2023 Ateam LifeDesign Inc.

21.

● フロントエンドアプリケーションのテスト戦略 #burikaigi_m コンポーネントテストが重要 ● E2EテストはすぐにCIが伸びる(20分~になりがち)‧偽陽性が多くなるのでやたらと増やしたくない ● DB接続を伴うロジックの結合テスト‧カスタムフックス含むロジックの単体テストだけでは、「このアプリケーションはテストがあるからリグレッションにすぐ気づけるぞ！」という温度感までカバーしきれない ● フロントエンドアプリケーションなのだからコンポーネントの表⽰‧動作確認が全体のテストケースの体感半分ぐらいを占めてる(はず) © 2023 Ateam LifeDesign Inc.

22.

● フロントエンドアプリケーションのテスト戦略 #burikaigi_m コンポーネントテストの実装⽅法 Storybookを使う、React Testing Libraryは使わない ● render(<></>)関数を使ってテストコード上でレンダリングするアレのこと ● React Testing Libraryで実装するコンポーネントテストは、実装の都度たくさんのテストコードを書く‧更新する必要があって⼤変 Storybookで正しくレンダリング‧表⽰されることが充分なテストケースたりえる ● 「どのようなテキストが表⽰されているか、スタイルが正しいか、クリックできるか、などビジュアル‧ブラウザのイベントに関連するテストケースは、 Storybookでストーリーを⽬で⾒て‧操作して確認できれば充分 © 2023 Ateam LifeDesign Inc.

23.

● フロントエンドアプリケーションのテスト戦略 #burikaigi_m コンポーネントテストの実装⽅法 VRT(Visual Regression Test)とplay関数で⾃動テストにする ● Storybookのストーリー毎にVRT(Visual Regression Test)を実施していれば、 VRTを確認‧更新し続けていること⾃体がUIに関するテストケースを更新しているのと同じ意味をもてる ● プロジェクトでは、Chromaticを使ってStorybookのVRTとplay functionのCIを実⾏している VRT(Visual Regression Test)を腐らせず続けることも重要 ● ● ● VRTもE2Eと同じく偽陽性が多い‧すぐにメンテされなくなってゆくいかにスナップショットのオリジナルの更新を仕組み化してめんどくさがらずに⾏えるかプロジェクトでは、デザイナーにVRTの確認をUIレビューという形で依頼している © 2023 Ateam LifeDesign Inc.

24.

25.

26.

#burikaigi_m ● テスト実装の例とポイント UIテスト、コンポーネントテスト UIコンポーネントだけでなく、データ‧ロジックを含んだコンポーネントをStorybookで表⽰するのがポイント ● ● ● (マイページのディレクトリ構造) © 2023 Ateam LifeDesign Inc. このディレクトリ構造にあるtsxファイルの Storyは全て作った⽅が良いなぜ？：これらがコンポーネントが機能実装、リファクタリングなどにより⼀番変更が⼊る可能性が⾼いから変更が少ないコードだけをテストしていても、テストの効能は得づらい

27.

28.

#burikaigi_m ● テスト実装の例とポイント UIテスト、コンポーネントテスト (page.tsx) Async Componentはデータを取得して下層に流し込むラッパー層にしてしまう ● Async Componentはpage.tsxのみ ● いわゆる、Presentaition / Container Pattern ● getTodoListPageData()はJestでテストするので、呼び出すだけのpage.tsxをテストする意味をほぼなくすことができる © 2023 Ateam LifeDesign Inc.

29.

30.

#burikaigi_m ● テスト実装の例とポイント UIテスト、コンポーネントテスト (TodoListPage.stories.tsx) Storybook play functionを⽤いて Playwrightを(内部的に)使いながらテストを⾏う ● router.refresh()の呼び出しを確認しているのがポイント。データ更新されるところまでは確認できない(重要)が、更新されるトリガーを発⽕しているところまではテストできる。 ● フロントがデータのレンダリングに集中する設計のアプリなら充分 © 2023 Ateam LifeDesign Inc.

31.

32.

33.

● テスト実装の例とポイント #burikaigi_m DB接続を伴うロジックの結合テスト (RSC) ● データ取得‧整形する関数をテストすれば良いだけなので、とくに実装が難しいポイントはない。Node.jsでテスト実装するのと同じ。 ● DBを伴うテストは、モックするか、実DB叩くか、トランザクションロールバックを活⽤するか等、テスト環境を⽤意するにあたって少し考える必要がある ● このプロジェクトでは、実DBに接続しつつもデータを作成しないようトランザクションロールバック(Quramy/jest-prisma)を使ってテストを実装この⽅法では、 Jestの実⾏時間が10s~に伸びる問題がすぐに⽣まれるが、今回は深く掘り下げない © 2023 Ateam LifeDesign Inc.

34.

35.

● テスト実装の例とポイント #burikaigi_m DB接続を伴うロジックの結合テスト (Route Handler) ● こちらも、特に実装が特別ハマるポイントはない ● テストケースは、Web APIをテストするときと同じ観点で書けば良い ● 強いて⾔えばRoute Handlerの関数(GET, POST, PUT等)の呼び出し⽅に注意 VercelがData Access layerと紹介しているような外部とやりとりする機能をまとめたモジュールを作成しておいた⽅が、JestでもStorybookでもモックが簡単になるので採⽤した⽅が良い © 2023 Ateam LifeDesign Inc.

36.

37.

38.

39.

40.

41.

● テスト実装の例とポイント #burikaigi_m UIテスト、コンポーネントテスト (Server Actions) ● ⿁⾨。Server ActionsをimportしたファイルはStorybookのビルドに含められない (Server Actionsはimportできない) ● 「prisma(Node.jsに依存している)をimportしているファイルがある」ぐらいだったら、storybook-addon-module-mockでstoriesで依存を持つモジュールをモックしてやれば良い。補⾜) 2024/1/19に調べたら「propsとしてserver actionsを渡せる」ことを利⽤した解決策もありそう FYI: https://github.com/storybookjs/storybook/issues/21540#issuecomment-1881895273 © 2023 Ateam LifeDesign Inc.

42.

43.

44.

● 最後に #burikaigi_m データ‧ロジックを扱う中間層のコンポーネント含めて、Storybookに登録できるかが実践的なフロントエンドテストの鍵だと思う ● ただし、Storybookはページをまたいだ動作の確認はニガテ(ほぼできない) ● SPA構成ならば、mswでエンドポイントをモックしてStorybook上でアプリケーションをほとんど再現できる。 ● MPAなサイト‧データ取得がサーバーの構成だと⼯夫が必要になってくる。 ● それを⾒越してカバー仕切れない範囲を他のテスト⽅法‧実装⼯夫で補う Async Componentを⼦に持つrender-as-you-fetchパターンのテスト実装は次回調査します © 2023 Ateam LifeDesign Inc.

45.

#burikaigi_m ● 本⽇のメッセージ Next.js App RouterでもStorybookを活⽤したコンポーネントテストを実施しよう！ App Routerでもやれる！ Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った能実装とテストの結合 2024年01⽉20⽇⻑尾准誠 © 2023 Ateam LifeDesign Inc.

46.

47.

48.

49.

50.

● フロントエンドアプリケーションのテスト戦略 #burikaigi_m UIテスト、コンポーネントテスト⽅針 ● React Testing Libraryで実装するコンポーネントテストは、実装の都度たくさんテストコードを書く‧更新する必要があって⼤変だからしない (様は、DOM構造‧コンポーネントという変わりやすい要素に対してコスパが悪い) ● Storybook(コンポーネント単体でレンダリングするシステム)に登録しておくだけで、正しくレンダリングされることが充分なテストケースになる ● Storybookのストーリー毎にVRT(Visual Regression Test)を実施していれば、 VRTを確認‧更新し続けていること⾃体がUIに関するテストケースを更新しているのと同じ意味をもてるテストケース例 ● ● 「未完了のタスクのみ表⽰する」(Storybookでレンダリング) 「チェックボックスをタップしてチェックできる」(Storybook play functionでイベント操作) © 2023 Ateam LifeDesign Inc.

51.

52.

● フロントエンドアプリケーションのテスト戦略カスタムフックス含むロジックの単体テスト⽅針 ● サーバー、クライアント問わずロジックは関数に切り出して単体テストに回すテストケース例 ● ● ● 「タスクを予定時期毎にグルーピングしたMapを返す」「チェックされたらタスクチェックAPIを呼び出す」「パラメーターを正しくバリデーションする」 © 2023 Ateam LifeDesign Inc. #burikaigi_m

53.

54.

55.

● テスト実装の例とポイント #burikaigi_m E2Eテストの実装 ● ● テストケース：「マイページへアクセスできる」認証を通ってページを表⽰させて終わり ● 「正しいデータで表⽰できるか」はUIテスト、DB接続を⽤いた結合テストでカバーしているので実装しない (E2Eテスト実装は、世の中に深い説明をされている⽅がたくさんいるので今回のセッションではあまり深く掘り下げない) © 2023 Ateam LifeDesign Inc.

56.