CourseFlix

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

Course content

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

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 Testing Next.js Apps with Jest, Testing Library and Cypress?
Testing Next.js Apps with Jest, Testing Library and Cypress is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Testing Next.js Apps with Jest, Testing Library and Cypress?
Testing Next.js Apps with Jest, Testing Library and Cypress contains 90 lessons with a total runtime of 7 hours 35 minutes. All lessons are available to watch online at your own pace.
Is Testing Next.js Apps with Jest, Testing Library and Cypress free to watch?
Testing Next.js Apps with Jest, Testing Library and Cypress is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Testing Next.js Apps with Jest, Testing Library and Cypress online?
Testing Next.js Apps with Jest, Testing Library and Cypress 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.