CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What is Testing Next.js Apps with Jest, Testing Library and Cypress about?
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…
Who teaches this course?
It is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 90 lessons with a total runtime of 7 hours 35 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/testing-next-js-apps-with-jest-testing-library-and-cypress. The page hosts every lesson with the integrated video player; no download is required.