Udemy

Platform

日本語

Language

Network & Security

Category

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

日本先行公開 : NextjsのReact-testing-libraryを使ったテスト手法を体系的に学習。TypeScript, Tailwind CSS, Jest, React-Testing-Library, MSW, useSWR

4.58 (51 reviews)

Students

4.5 hours

Content

Sep 2021

Last Update
Regular Price


What you will learn

React-testing-libraryを使ったNextjsのテスト手法

REST APIのMock手法

VercelとGitHubによる自動テスト

TypeScript


Description

本コースでは、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


Screenshots

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

Content

はじめに

はじめに

コースに必要なツール

[基礎編] Nextjs : React-testing-library

GitHub source

Nextjs project setup

Testing of page navigation

Blog page (実装)

Testing of getStaticProps/getStaticPaths

Comment Page (実装)

Testing of useContext (状態管理)

Testing of useSWR with getStaticProps

Deploy to Vercel + automatic testing

[実践編] Nextjs + Django REST Framework + React-testing-library

GitHub source (REST API)

Django REST Framework

API End point check

GitHub source (Nextjs)

create-next-app + project setup

BlogPage

BlogDetailPage

AuthPage

Testing of AuthPage

Testing of BlogPage

Testing of BlogDetailPage

Testing of BlogDetail component

更に学びたい人向け

ボーナスレクチャー


3746032

Udemy ID

1/3/2021

Course created date

1/20/2021

Course Indexed date
Bot
Course Submitted by