English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 107 lectures (7h 51m) | 3.28 GB
Learn to test a real-world serverless React app with routes, authentication, database and more!
Learn how to test your Next.js app from top to bottom! Tests provide confidence that your Next.js app won’t be released with embarrassing, costly bugs. Employers need developers who know how to write tests!
Comprehensive Next.js App Testing
This course teaches how to test all aspects of a Next.js application, including:
- UI unit tests
- API unit tests
- Next.js routes
- Cached pages
- Data updates (both to the cache and via SWR refresh interval)
- Authentication
- End-to-End tests for a complete user flow
The course uses a cross-section of testing technologies, featuring:
- Jest
- React Testing Library
- Mock Service Worker
- Cypress
- Cypress Testing Library
You’ll also learn a wide array of testing techniques, such as:
- Using a test database
- Environment variables
- Jest module mocking
- Testing definitions and tradeoffs (not necessarily a technique, but helpful in making decisions about what to test!)
Practice what you’ve learned
The course includes “code quizzes” — challenges to write code based on the concepts you’ve just learned. For more concept-heavy sections (such as testing definitions and guidelines) the course provides multiple-choice quizzes.
Test a pre-written app
A Next.js app has already been written for the course, so the course content can focus on testing. The course tests a popular concert venue app called… Popular Concert Venue (the owners were apparently running low on creativity when they named the place). The app features shows from bands such as The Joyous Nun Riot and Avalanche of Cheese. Randomized, mad-libs style band descriptions and images add to the fun.
What you’ll learn
- Testing Next . js UI, API, routes, authentication and database interactions
- When to use unit testing, integration testing and end-to-end testing — and why!
- Strategies for testing SSG, SSR, ISR and CSR (including cache updates and SWR revalidation intervals)
- How to use a test database for tests that involve data fetching and mutations
Table of Contents
Introduction
1 Introduction
2 Course Technologies and Prerequisites
3 TEMPORARY WARNING Jest does not work with Next.js 12.1.6
4 create-next-app Using with-jest Example
5 First Next.js Test
6 Course Features Code Quizzes and Side Notes
7 Guide to the Rest of the Course
Testing Definitions and Philosophy
8 Introduction to Testing
9 Types of Tests
10 What to Test
11 Test Redundancy
12 Test Granularity Guidelines
13 My View on Snapshot Tests (hint not my thing)
14 Summary Testing Definitions and Philosophy
Course App and Next.js Data Fetching Strategies
15 Introduction to Course App and Next.js Data Fetching
16 Demo of Course App
17 Next.js Data Fetching Strategies
19 Installing the Course App
20 Course App Code Notes
UI Testing
21 Introduction and Technologies
22 Testing a Static Page
23 SIDE NOTE Why add to the existing test Why not create a new test
24 Testing SSG Props
25 SIDE NOTE About Fake Data for Popular Concert Venue
26 Code Quiz! Band Component Error
27 Decisions and Guidelines for the Tests So Far
28 Introduction to Mock Service Worker
29 Setting up MSW with Next.js
30 Adding a MSW Handler
31 SIDE NOTE Troubleshooting MSW Handlers
32 Using MSW for a Test Reservation Component
33 Code Quiz! User Reservations
34 Different MSW Responses per Test
35 Code Quiz! Different MSW Responses per Test
36 Summary UI Testing
Setting up a Test Database
37 IMPORTANT NOTES for Windows users
38 Introduction to Test Databases
39 Creating a Test Database
40 Environment Variables
41 Creating the Test DB and Environment Variables
42 SIDE NOTE Test DB example with cloud server
43 Create a Method to Reset the Test DB
44 Summary Setting up a Test Database
Testing Next.js Routes (using Cypress)
45 Introducing testing Next.js Routes and Cypress
46 OPTIONAL Introduction to Cypress
47 Setting up Next.js for Cypress
48 SIDE NOTE Running Continuous Integration Tests against Preview Deploy
49 Setting up Cypress
50 SIDE NOTE Running cypress without specifying a path
51 First Cypress Test Static Route
52 Code Quiz! Static Route
53 Testing Dynamic Routes
54 Resetting the Database in Cypress
55 SIDE NOTE Why reset at the beginning of the test and not the end
56 Test Dynamic Route that was Present at Build Time
57 Code Quiz! Test route that does not exist
58 Test Route Created after Build
59 Run all Cypress and Jest Tests
60 Summary Testing Next.js Routes and Cypress
Testing ISR and Data Updates
61 Introduction to Testing ISR and Data Updates
62 Testing Data Comes from ISR Cache
63 First ISR Cache Test
64 Code Quiz! ISR Bands Page
66 Updating the ISR Cache on Demand
67 Writing a Cypress Plug-In for Environment Variable
68 ISR Revalidation Test
69 Clearing the ISR Cache
70 Adding ISR Cache Clearing to Test
71 Code Quiz! Revalidate ISR Cache
72 SWR Revalidate on Interval
73 Testing Revalidate on Interval
74 Code Quiz! Revalidate on Interval
75 Summary Testing ISR and Data Updates
Testing Authentication
76 Introduction to Testing Authentication
77 Auth Wrapper in Course App
78 Adding Sign-In Details to Cypress
79 Testing Success Flow with Auth Wrapper
80 SIDE NOTE Why is this test so dang long
81 Code Quiz! Authentication Failure followed by Success
82 Parametrizing Protected Page Tests
83 Authenticating Programmatically
84 SIDE NOTE Resources for Authenticating Programmatically
85 Code Quiz! Authenticating Programmatically
86 Ticket Purchase End-to-End Test
87 SIDE NOTE SWR can’t find updated text (de-duping interval)
88 Summary Testing Authentication
Testing Next.js APIs
89 Introduction to API Tests
90 First API Test
91 Fixing Test Errors Polyfill, resetDB, ignore DB directory in watchlist
92 Testing a Route with a URL Param
93 Testing a POST Route
94 Mocking utils Module for Authentication
95 SIDE NOTE `export` Syntax for Mocked TypeScript Module in Jest
96 Write Test using Mocked Module
97 Code Quiz! User with No Reservations
98 Code Quiz! Post a Reservation
99 Fixing Issues with Parallel Tests using Shared Database
100 SIDE NOTE Example of Using Multiple jest.config.js Files
101 Updating Mock Function Return Value Testing Unauthorized Request
102 Code Quiz! Updating Mock Function Return Value
103 Testing Routes with Query String Params
104 Code Quiz! Query String Params
105 Summary Testing Next.js APIs
106 Congratulations and Thank You!
Further Learning
107 Bonus Lecture
Resolve the captcha to access the links!