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

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

4.58 (45 reviews)
Udemy
platform
English
language
Software Testing
category
instructor
896
students
8 hours
content
Jun 2022
last update
$84.99
regular price

What you will 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

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:

  1. UI unit tests

  2. API unit tests

  3. Next.js routes

  4. Cached pages

  5. Data updates (both to the cache and via SWR refresh interval)

  6. Authentication

  7. End-to-End tests for a complete user flow

The course uses a cross-section of testing technologies, featuring: 

  1. Jest

  2. React Testing Library

  3. Mock Service Worker

  4. Cypress

  5. Cypress Testing Library

You'll also learn a wide array of testing techniques, such as:

  1. Using a test database

  2. Environment variables

  3. Jest module mocking

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

Screenshots

Testing Next.js Apps with Jest, Testing Library and Cypress - Screenshot_01Testing Next.js Apps with Jest, Testing Library and Cypress - Screenshot_02Testing Next.js Apps with Jest, Testing Library and Cypress - Screenshot_03Testing Next.js Apps with Jest, Testing Library and Cypress - Screenshot_04

Content

Introduction

Introduction
Course Technologies and Prerequisites
create-next-app Using with-jest Example
First Next.js Test
Course Features: Code Quizzes and Side Notes
Guide to the Rest of the Course

Testing Definitions and Philosophy

Introduction to Testing
Types of Tests
What to Test
Test Redundancy
Test Granularity Guidelines
My View on Snapshot Tests (hint: not my thing)
Summary: Testing Definitions and Philosophy
Testing Terms and Guidelines

Course App and Next.js Data Fetching Strategies

Introduction to Course App and Next.js Data Fetching
Demo of Course App
Next.js Data Fetching Strategies
Next.js Data Fetching Strategies
Installing the Course App
Course App Code Notes

UI Testing

Introduction and Technologies
Testing a Static Page
SIDE NOTE: Why add to the existing test? Why not create a new test?
Testing SSG Props
SIDE NOTE: About Fake Data for "Popular Concert Venue"
Code Quiz! Band Component Error
Decisions and Guidelines for the Tests So Far
Introduction to Mock Service Worker
Setting up MSW with Next.js
Adding a MSW Handler
SIDE NOTE: Troubleshooting MSW Handlers
Using MSW for a Test: Reservation Component
Code Quiz! User Reservations
Different MSW Responses per Test
Code Quiz! Different MSW Responses per Test
Summary: UI Testing

Setting up a Test Database

Introduction to Test Databases
Creating a Test Database
Environment Variables
Creating the Test DB and Environment Variables
SIDE NOTE: Test DB example with cloud server
Create a Method to Reset the Test DB
Summary: Setting up a Test Database
Test Database Concepts

Testing Next.js Routes (using Cypress)

Introducing testing Next.js Routes and Cypress
OPTIONAL: Introduction to Cypress
Setting up Next.js for Cypress
SIDE NOTE: Running Continuous Integration Tests against Preview Deploy
Setting up Cypress
First Cypress Test: Static Route
Code Quiz! Static Route
Testing Dynamic Routes
Resetting the Database in Cypress
SIDE NOTE: Why reset at the beginning of the test and not the end?
Test Dynamic Route that was Present at Build Time
Code Quiz! Test route that does not exist
Test Route Created after Build
Run all Cypress and Jest Tests
Summary: Testing Next.js Routes and Cypress

Testing ISR and Data Updates

Introduction to Testing ISR and Data Updates
Testing Data Comes from ISR Cache
First ISR Cache Test
Code Quiz! ISR Bands Page
Updating the ISR Cache on Demand
Writing a Cypress Plug-In for Environment Variable
ISR Revalidation Test
Clearing the ISR Cache
Adding ISR Cache Clearing to Test
Code Quiz! Revalidate ISR Cache
SWR Revalidate on Interval
Testing Revalidate on Interval
Code Quiz! Revalidate on Interval
Summary: Testing ISR and Data Updates

Testing Authentication

Introduction to Testing Authentication
Auth Wrapper in Course App
Adding Sign-In Details to Cypress
Testing Success Flow with Auth Wrapper
SIDE NOTE: Why is this test so dang long?
Code Quiz! Authentication Failure followed by Success
Parametrizing Protected Page Tests
Authenticating Programmatically
SIDE NOTE: Resources for Authenticating Programmatically
Code Quiz! Authenticating Programmatically
Ticket Purchase End-to-End Test
SIDE NOTE: SWR can't find updated text (de-duping interval)
Summary: Testing Authentication

Testing Next.js APIs

Introduction to API Tests
First API Test
Fixing Test Errors: Polyfill, resetDB, ignore DB directory in watchlist
Testing a Route with a URL Param
Testing a POST Route
Mocking utils Module for Authentication
SIDE NOTE: `export` Syntax for Mocked TypeScript Module in Jest
Write Test using Mocked Module
Code Quiz! User with No Reservations
Code Quiz! Post a Reservation
Fixing Issues with Parallel Tests using Shared Database
SIDE NOTE: Example of Using Multiple jest.config.js Files
Updating Mock Function Return Value: Testing Unauthorized Request
Code Quiz! Updating Mock Function Return Value
Testing Routes with Query String Params
Code Quiz! Query String Params
Summary: Testing Next.js APIs
Congratulations and Thank You!

Further Learning

Bonus Lecture

Reviews

Maria
July 10, 2022
It's very clear so far, easy to follow. On the down side I don't really like that using the 'npx create-next-app@latest --example with-jest with-jest-app' command the project comes with typescript, since I rarely use it I fear it's going to be a bit hard to adapt what I learn here in my personal projects.
Dom
June 23, 2022
It's been a positive experience so far; I am enjoying the pace, explanations so far have been pretty on point. I have not yet had a chance to applying learning from the course to my projects and that's the only reason for sticking with 4/5. IMO, what differentiates a tutorial from good to great is how easy it is to translate the 'theoretical' content from a tutorial into life projects.
Niklas
June 19, 2022
Amazing course, especially enjoyed the e2e testing with Cypress! Would love to see more courses of her that go into detail about API testing (outside of NextJS) since she seems super knowledgeable and I think we just scratched the surface here, since the course is mainly focused on making testing work with NextJS API Handlers in the backend.

Charts

Price

Testing Next.js Apps with Jest, Testing Library and Cypress - Price chart

Rating

Testing Next.js Apps with Jest, Testing Library and Cypress - Ratings chart

Enrollment distribution

Testing Next.js Apps with Jest, Testing Library and Cypress - Distribution chart

Coupons

DateDiscountStatus
5/17/202292% OFF
expired
7/2/202285% OFF
expired

Related Topics

4596820
udemy ID
3/15/2022
course created date
5/17/2022
course indexed date
Bot
course submited by