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 are the prerequisites for enrolling in this course?
Students should have a foundational understanding of JavaScript and React before enrolling. Familiarity with Next.js is also recommended, as the course builds on concepts specific to this framework. Prior experience with testing frameworks like Jest and libraries such as React Testing Library can be beneficial but is not mandatory, as the course introduces these tools.
What types of applications will I learn to test in this course?
The course focuses on testing Next.js applications, specifically comprehensive, serverless React apps. You will learn to test various aspects, including UI components, API endpoints, Next.js routes, and user authentication processes. The course also covers end-to-end testing for user flows using Cypress.
Who is the target audience for this course?
This course is designed for developers who want to improve their testing skills for Next.js applications. It is suitable for those who have a basic understanding of React and JavaScript and are looking to deepen their knowledge in testing methodologies and tools like Jest, Cypress, and React Testing Library.
How does this course compare to other testing courses?
Unlike general testing courses, this course offers a targeted exploration of testing within the Next.js framework. It provides specific insights into testing serverless React apps, including unique Next.js features like ISR (Incremental Static Regeneration) and route testing. The curriculum includes both unit and end-to-end testing, offering a holistic approach to test-driven development.
Which testing tools and frameworks are covered in the course?
The course extensively covers Jest and React Testing Library for unit testing and UI component testing. It also includes Mock Service Worker for intercepting network requests, and Cypress, along with the Cypress Testing Library, for end-to-end testing of user flows and dynamic routes.
Are there any topics that are not covered in this course?
The course does not delve into testing frameworks outside of Jest, React Testing Library, and Cypress. Additionally, it focuses on testing within the Next.js ecosystem, so topics related to other frameworks or languages are not covered. Advanced topics like continuous integration testing pipelines are also outside the scope.
What is the expected time commitment for this course?
The course consists of 90 lessons, which include hands-on exercises, code quizzes, and interactive learning opportunities. While the total runtime is not specified, students should allocate time for practical exercises and quizzes, as these are integral to the learning process. A reasonable estimate would be to dedicate several weeks to complete the course, depending on personal pace and prior experience.