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

Focused View

Bonnie Schulkin

7:33:54

11 View

01 - Introduction

001 Introduction.mp4

03:10

002 Course Technologies and Prerequisites.mp4

03:08

003 create-next-app Using with-jest Example.mp4

03:20

004 First Next.js Test.mp4

05:42

005 Course Features Code Quizzes and Side Notes.mp4

02:38

006 Guide to the Rest of the Course.mp4

05:14

external-links.txt

02 - Testing Definitions and Philosophy

001 Introduction to Testing.mp4

03:13

002 Types of Tests.mp4

04:33

003 What to Test.mp4

04:04

004 Test Redundancy.mp4

04:57

005 Test Granularity Guidelines.mp4

03:21

006 My View on Snapshot Tests (hint not my thing).mp4

03:05

007 Summary Testing Definitions and Philosophy.mp4

02:27

external-links.txt

03 - Course App and Next.js Data Fetching Strategies

001 Introduction to Course App and Next.js Data Fetching.mp4

01:13

002 Demo of Course App.mp4

03:18

003 Next.js Data Fetching Strategies.mp4

10:48

004 Installing the Course App.mp4

04:38

005 Course App Code Notes.mp4

05:27

external-links.txt

04 - UI Testing

001 Introduction and Technologies.mp4

03:45

002 Testing a Static Page.mp4

07:18

003 SIDE NOTE Why add to the existing test Why not create a new test.html

004 Testing SSG Props.mp4

07:55

005 SIDE NOTE About Fake Data for Popular Concert Venue.html

006 Code Quiz! Band Component Error.mp4

02:58

007 Decisions and Guidelines for the Tests So Far.mp4

04:30

008 Introduction to Mock Service Worker.mp4

02:58

009 Setting up MSW with Next.js.mp4

05:12

010 Adding a MSW Handler.mp4

07:37

011 SIDE NOTE Troubleshooting MSW Handlers.html

012 Using MSW for a Test Reservation Component.mp4

06:12

013 Code Quiz! User Reservations.mp4

06:31

014 Different MSW Responses per Test.mp4

10:19

015 Code Quiz! Different MSW Responses per Test.mp4

03:18

016 Summary UI Testing.mp4

02:39

external-links.txt

05 - Setting up a Test Database

001 Introduction to Test Databases.mp4

03:39

002 Creating a Test Database.mp4

03:28

003 Environment Variables.mp4

07:16

004 Creating the Test DB and Environment Variables.mp4

07:58

005 SIDE NOTE Test DB example with cloud server.html

006 Create a Method to Reset the Test DB.mp4

08:53

007 Summary Setting up a Test Database.mp4

01:27

external-links.txt

06 - Testing Next.js Routes (using Cypress)

001 Introducing testing Next.js Routes and Cypress.mp4

02:56

002 OPTIONAL Introduction to Cypress.mp4

02:06

003 Setting up Next.js for Cypress.mp4

05:46

004 SIDE NOTE Running Continuous Integration Tests against Preview Deploy.html

005 Setting up Cypress.mp4

09:04

006 First Cypress Test Static Route.mp4

06:38

007 Code Quiz! Static Route.mp4

03:02

008 Testing Dynamic Routes.mp4

02:20

009 Resetting the Database in Cypress.mp4

07:09

010 SIDE NOTE Why reset at the beginning of the test and not the end.html

011 Test Dynamic Route that was Present at Build Time.mp4

03:35

012 Code Quiz! Test route that does not exist.mp4

02:43

013 Test Route Created after Build.mp4

07:08

014 Run all Cypress and Jest Tests.mp4

05:43

015 Summary Testing Next.js Routes and Cypress.mp4

02:32

external-links.txt

07 - Testing ISR and Data Updates

001 Introduction to Testing ISR and Data Updates.mp4

02:42

002 Testing Data Comes from ISR Cache.mp4

04:19

003 First ISR Cache Test.mp4

05:13

004 Code Quiz! ISR Bands Page.mp4

04:02

005 Updating the ISR Cache on Demand.mp4

05:27

006 Writing a Cypress Plug-In for Environment Variable.mp4

03:43

007 ISR Revalidation Test.mp4

09:54

008 Clearing the ISR Cache.mp4

11:37

009 Adding ISR Cache Clearing to Test.mp4

04:49

010 Code Quiz! Revalidate ISR Cache.mp4

04:44

011 SWR Revalidate on Interval.mp4

04:16

012 Testing Revalidate on Interval.mp4

11:17

013 Code Quiz! Revalidate on Interval.mp4

04:11

014 Summary Testing ISR and Data Updates.mp4

02:12

external-links.txt

08 - Testing Authentication

001 Introduction to Testing Authentication.mp4

03:22

002 Auth Wrapper in Course App.mp4

06:22

003 Adding Sign-In Details to Cypress.mp4

04:12

004 Testing Success Flow with Auth Wrapper.mp4

11:33

005 SIDE NOTE Why is this test so dang long.html

006 Code Quiz! Authentication Failure followed by Success.mp4

03:55

007 Parametrizing Protected Page Tests.mp4

05:21

008 Authenticating Programmatically.mp4

09:09

009 SIDE NOTE Resources for Authenticating Programmatically.html

010 Code Quiz! Authenticating Programmatically.mp4

05:39

011 Ticket Purchase End-to-End Test.mp4

03:21

012 SIDE NOTE SWR cant find updated text (de-duping interval).html

013 Summary Testing Authentication.mp4

01:48

external-links.txt

09 - Testing Next.js APIs

001 Introduction to API Tests.mp4

05:29

002 First API Test.mp4

08:32

003 Fixing Test Errors Polyfill, resetDB, ignore DB directory in watchlist.mp4

08:14

004 Testing a Route with a URL Param.mp4

06:57

005 Testing a POST Route.mp4

06:54

006 Mocking utils Module for Authentication.mp4

06:57

007 SIDE NOTE `export` Syntax for Mocked TypeScript Module in Jest.html

008 Write Test using Mocked Module.mp4

05:30

009 Code Quiz! User with No Reservations.mp4

03:05

010 Code Quiz! Post a Reservation.mp4

06:09

011 Fixing Issues with Parallel Tests using Shared Database.mp4

05:44

012 SIDE NOTE Example of Using Multiple jest.config.js Files.html

013 Updating Mock Function Return Value Testing Unauthorized Request.mp4

05:01

014 Code Quiz! Updating Mock Function Return Value.mp4

02:14

015 Testing Routes with Query String Params.mp4

05:09

016 Code Quiz! Query String Params.mp4

01:58

017 Summary Testing Next.js APIs.mp4

02:59

018 Congratulations and Thank You!.mp4

01:03

external-links.txt

10 - Further Learning

001 Bonus Lecture.html

external-links.txt

Description

Learn to test a real-world serverless React app with routes, authentication, database and more!

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

Who is this for?

Next . js developers who want to learn how to test all aspects of their app

What You Need to Know?

Next . js UI and API (particularly version 10+)

React components and hooks

RECOMMENDED: Jest, Testing Library for React, Cypress

HELPFUL: Mock Service Worker

More details

Description
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.

Proven Instructor
The instructor is a proven Udemy veteran, with reputation for clear explanations, Q&AÂ responsiveness, conciseness, and useful practice activities. Here are some reviews from the instructor's other courses:Â
A great course, probably the best testing course I've ever taken.
After watching other courses on the same topic, this is the first one that I'm actually excited to dig into.
This course exceeded all my expectations. It has the right amount between practice and theory. The teacher is amazing and thoughtful and she answers the students.
I have taken several courses on Udemy, and this is the best one where the teacher doesnt just lecture, but actually structures the class so that I learn the material.
Who this course is for:
Next . js developers who want to learn how to test all aspects of their app

User Reviews

Rating

average 0

Total votes0

Focused display

My teaching career started when I played school with my (not very willing) younger brother as a kid. I gradually expanded my horizons to teaching (marginally) more willing high school students, and more recently have taught software development at various boot camps to delightfully willing adults. I have been working in the software industry on and off since the mid-90s, which predates the birth of many coders in the San Francisco tech scene(!).

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.