[テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト

本コースでは、2021の注目ReactフレームワークであるNextjsプロジェクトでソフトウェアテストを実施する手法について学習します。

Nextjs + TypeScript + Tailwind CSSのベースプロジェクトに対してReact-testing-library/Jestでテストを実施する具体的方法について学んでいきます。海外の英語の情報でも公開されていない最新のテスト手法を日本先行公開で紹介していきます。

*React-testing-library/JestはReactから公式に推奨されているテストツール

*MSW(Mock service worker)は、2020年Javascript open source賞を受賞した注目技術 (The Most Exciting Use of Technology賞)

  -> React-testing-libraryの公式サイトもAPIのモックにMSWを推奨

本コースの主なコンテンツ

• "Link" componentによるページ遷移テスト (next-page-tester)

• userEventのテスト

• REST API のMock (MSW(Mock Service worker))

• getStaticPropsのテスト (next-page-tester & MSW)

• getStaticPaths + Dynamic routesのテスト (next-page-tester & MSW)

• useSWRのテスト(SWRConfig + MSW)

• getStaticProps + useSWR複合pageのテスト

• useContextのテスト(状態管理)

• Vercelを使ったCI(継続的インタグレーション)

    ->  "Git push -> run test -> build/deployの自動化"

技術トピック

• Nextjs

• TypeScript

• Tailwind CSS

• React-testing-library/Jest

• MSW (Mock Service Worker)

• useSWR

• next-page-tester