Testing Next.js Apps with Jest, Testing Library and Cypress

7h 35m 24s
English
Paid

Master Next.js App Testing

Gain in-depth knowledge on how to test a comprehensive, serverless React app with Next.js. Build the skills employers are looking for and ensure your projects are bug-free and reliable from the get-go!

Course Overview

This course provides a detailed exploration of testing methodologies for Next.js applications. The curriculum covers:

  1. UI Unit Tests

  2. API Unit Tests

  3. Next.js Route Testing

  4. Cached Page Verifications

  5. Data and Cache Update Tests

  6. Authentication Processes

  7. End-to-End Testing for User Flow

Testing Tools and Technologies

The course integrates a diverse range of testing technologies, including:

  1. Jest - A delightfully easy-to-use JavaScript testing framework.

  2. React Testing Library - Ensures best practices for testing UI components.

  3. Mock Service Worker - A tool to intercept network requests during tests.

  4. Cypress - A powerful end-to-end testing tool.

  5. Cypress Testing Library - Simplifies testing React components in Cypress.

Advanced Testing Techniques

Explore a variety of testing techniques that will enhance your understanding, including:

  1. Using a Test Database Effectively

  2. Configuring Environment Variables for Testing

  3. Jest Module Mocking for Isolation Testing

  4. Understanding Testing Definitions and Decision Trade-offs

Hands-On Learning Approach

Interactive Exercises and Quizzes

Solidify your learning through practical challenges, known as "code quizzes," designed to help you apply the concepts you have covered. Complementary multiple-choice quizzes are available for theory-heavy subjects.

Pre-written Application Testing

Real-world Application Testing

The course provides an already developed Next.js app, allowing you to focus intensively on testing techniques. You'll work with a simulated "Popular Concert Venue" app, featuring amusing band names like The Joyous Nun Riot and Avalanche of Cheese to keep the learning process engaging and enjoyable.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 90 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 90 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (90)
#Lesson TitleDurationAccess
1
Introduction Demo
03:11
2
Course Technologies and Prerequisites
03:09
3
create-next-app Using with-jest Example
03:21
4
First Next.js Test
05:43
5
Course Features: Code Quizzes and Side Notes
02:39
6
Guide to the Rest of the Course
05:15
7
Introduction to Testing
03:14
8
Types of Tests
04:34
9
What to Test
04:05
10
Test Redundancy
04:58
11
Test Granularity Guidelines
03:22
12
My View on Snapshot Tests (hint: not my thing)
03:06
13
Summary: Testing Definitions and Philosophy
02:28
14
Introduction to Course App and Next.js Data Fetching
01:14
15
Demo of Course App
03:19
16
Next.js Data Fetching Strategies
10:49
17
Installing the Course App
04:39
18
Course App Code Notes
05:28
19
Introduction and Technologies
03:46
20
Testing a Static Page
07:19
21
Testing SSG Props
07:56
22
Code Quiz! Band Component Error
02:59
23
Decisions and Guidelines for the Tests So Far
04:31
24
Introduction to Mock Service Worker
02:59
25
Setting up MSW with Next.js
05:13
26
Adding a MSW Handler
07:38
27
Using MSW for a Test: Reservation Component
06:13
28
Code Quiz! User Reservations
06:32
29
Different MSW Responses per Test
10:20
30
Code Quiz! Different MSW Responses per Test
03:19
31
Summary: UI Testing
02:40
32
Introduction to Test Databases
03:40
33
Creating a Test Database
03:29
34
Environment Variables
07:17
35
Creating the Test DB and Environment Variables
07:59
36
Create a Method to Reset the Test DB
08:54
37
Summary: Setting up a Test Database
01:28
38
Introducing testing Next.js Routes and Cypress
02:57
39
OPTIONAL: Introduction to Cypress
02:07
40
Setting up Next.js for Cypress
05:47
41
Setting up Cypress
09:05
42
First Cypress Test: Static Route
06:39
43
Code Quiz! Static Route
03:03
44
Testing Dynamic Routes
02:21
45
Resetting the Database in Cypress
07:10
46
Test Dynamic Route that was Present at Build Time
03:36
47
Code Quiz! Test route that does not exist
02:44
48
Test Route Created after Build
07:09
49
Run all Cypress and Jest Tests
05:44
50
Summary: Testing Next.js Routes and Cypress
02:33
51
Introduction to Testing ISR and Data Updates
02:43
52
Testing Data Comes from ISR Cache
04:20
53
First ISR Cache Test
05:14
54
Code Quiz! ISR Bands Page
04:03
55
Updating the ISR Cache on Demand
05:28
56
Writing a Cypress Plug-In for Environment Variable
03:44
57
ISR Revalidation Test
09:55
58
Clearing the ISR Cache
11:38
59
Adding ISR Cache Clearing to Test
04:50
60
Code Quiz! Revalidate ISR Cache
04:45
61
SWR Revalidate on Interval
04:17
62
Testing Revalidate on Interval
11:18
63
Code Quiz! Revalidate on Interval
04:12
64
Summary: Testing ISR and Data Updates
02:13
65
Introduction to Testing Authentication
03:23
66
Auth Wrapper in Course App
06:23
67
Adding Sign-In Details to Cypress
04:13
68
Testing Success Flow with Auth Wrapper
11:34
69
Code Quiz! Authentication Failure followed by Success
03:56
70
Parametrizing Protected Page Tests
05:22
71
Authenticating Programmatically
09:10
72
Code Quiz! Authenticating Programmatically
05:40
73
Ticket Purchase End-to-End Test
03:22
74
Summary: Testing Authentication
01:49
75
Introduction to API Tests
05:30
76
First API Test
08:33
77
Fixing Test Errors: Polyfill, resetDB, ignore DB directory in watchlist
08:15
78
Testing a Route with a URL Param
06:58
79
Testing a POST Route
06:55
80
Mocking utils Module for Authentication
06:58
81
Write Test using Mocked Module
05:31
82
Code Quiz! User with No Reservations
03:06
83
Code Quiz! Post a Reservation
06:10
84
Fixing Issues with Parallel Tests using Shared Database
05:45
85
Updating Mock Function Return Value: Testing Unauthorized Request
05:02
86
Code Quiz! Updating Mock Function Return Value
02:15
87
Testing Routes with Query String Params
05:10
88
Code Quiz! Query String Params
01:59
89
Summary: Testing Next.js APIs
03:00
90
Congratulations and Thank You!
01:04
Unlock unlimited learning

Get instant access to all 89 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription