Testing Nextjs Apps with Jest Testing Library and Cypress

Learn to test a real-world serverless React app with routes, authentication, database and more!
Testing Nextjs Apps with Jest Testing Library and Cypress
File Size :
2.90 GB
Total length :
7h 57m

Category

Instructor

Bonnie Schulkin

Language

Last update

11/2023

Ratings

4.3/5

Testing Nextjs Apps with Jest Testing Library and Cypress

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

Testing Nextjs Apps with Jest Testing Library and Cypress

Requirements

Next . js UI and API (particularly version 10+)
React components and hooks
RECOMMENDED: Jest, Testing Library for React, Cypress
HELPFUL: Mock Service Worker

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 TestingThis course teaches how to test all aspects of a Next.js application, including:UI unit testsAPI unit testsNext.js routesCached pagesData updates (both to the cache and via SWR refresh interval)AuthenticationEnd-to-End tests for a complete user flowThe course uses a cross-section of testing technologies, featuring: JestReact Testing LibraryMock Service WorkerCypressCypress Testing LibraryYou’ll also learn a wide array of testing techniques, such as:Using a test databaseEnvironment variablesJest module mockingTesting definitions and tradeoffs (not necessarily a technique, but helpful in making decisions about what to test!)Practice what you’ve learnedThe 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 appA 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 InstructorThe 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Course Technologies and Prerequisites

Lecture 3 WARNING: with-jest snapshot test fails with current version of Next.js

Lecture 4 create-next-app Using with-jest Example

Lecture 5 First Next.js Test

Lecture 6 Course Features: Code Quizzes and Side Notes

Lecture 7 Guide to the Rest of the Course

Section 2: Testing Definitions and Philosophy

Lecture 8 Introduction to Testing

Lecture 9 Types of Tests

Lecture 10 What to Test

Lecture 11 Test Redundancy

Lecture 12 Test Granularity Guidelines

Lecture 13 My View on Snapshot Tests (hint: not my thing)

Lecture 14 Summary: Testing Definitions and Philosophy

Section 3: Course App and Next.js Data Fetching Strategies

Lecture 15 Introduction to Course App and Next.js Data Fetching

Lecture 16 Demo of Course App

Lecture 17 Next.js Data Fetching Strategies

Lecture 18 WINDOWS USERS: important note about name of course repository

Lecture 19 CORRECTION to next lecture: generating random strings

Lecture 20 Installing the Course App

Lecture 21 Course App Code Notes

Section 4: UI Testing

Lecture 22 Introduction and Technologies

Lecture 23 Testing a Static Page

Lecture 24 SIDE NOTE: Why add to the existing test? Why not create a new test?

Lecture 25 Testing SSG Props

Lecture 26 SIDE NOTE: About Fake Data for “Popular Concert Venue”

Lecture 27 Code Quiz! Band Component Error

Lecture 28 Decisions and Guidelines for the Tests So Far

Lecture 29 Introduction to Mock Service Worker

Lecture 30 IMPORTANT! Mock Service Worker version

Lecture 31 Setting up MSW with Next.js

Lecture 32 Adding a MSW Handler

Lecture 33 SIDE NOTE: Troubleshooting MSW Handlers

Lecture 34 Using MSW for a Test: Reservation Component

Lecture 35 Code Quiz! User Reservations

Lecture 36 Different MSW Responses per Test

Lecture 37 Code Quiz! Different MSW Responses per Test

Lecture 38 Summary: UI Testing

Section 5: Setting up a Test Database

Lecture 39 WINDOWS AND LINUX USERS: adjustments to npm scripts

Lecture 40 Introduction to Test Databases

Lecture 41 Creating a Test Database

Lecture 42 Environment Variables

Lecture 43 Creating the Test DB and Environment Variables

Lecture 44 SIDE NOTE: Test DB example with cloud server

Lecture 45 Create a Method to Reset the Test DB

Lecture 46 Summary: Setting up a Test Database

Section 6: Testing Next.js Routes (using Cypress)

Lecture 47 TROUBLESHOOTING: app won’t build with Nextjs version 12.2 or above

Lecture 48 Introducing testing Next.js Routes and Cypress

Lecture 49 OPTIONAL: Introduction to Cypress

Lecture 50 UPDATE: Cypress 10

Lecture 51 WINDOWS USERS: Different `build: test` command required

Lecture 52 Setting up Next.js for Cypress

Lecture 53 SIDE NOTE: Running Continuous Integration Tests against Preview Deploy

Lecture 54 Setting up Cypress

Lecture 55 TROUBLESHOOTING: `npm run cypress:start` hangs

Lecture 56 SIDE NOTE: Running cypress without specifying a path

Lecture 57 IMPORTANT: Must use older version of Testing Library with Cypress 9

Lecture 58 First Cypress Test: Static Route

Lecture 59 Code Quiz! Static Route

Lecture 60 Testing Dynamic Routes

Lecture 61 Resetting the Database in Cypress

Lecture 62 SIDE NOTE: Why reset at the beginning of the test and not the end?

Lecture 63 Test Dynamic Route that was Present at Build Time

Lecture 64 Code Quiz! Test route that does not exist

Lecture 65 Test Route Created after Build

Lecture 66 Run all Cypress and Jest Tests

Lecture 67 TROUBLESHOOTING: `npm run cypress:run` hangs

Lecture 68 Summary: Testing Next.js Routes and Cypress

Section 7: Testing ISR and Data Updates

Lecture 69 Introduction to Testing ISR and Data Updates

Lecture 70 Testing Data Comes from ISR Cache

Lecture 71 First ISR Cache Test

Lecture 72 SIDE NOTE: Next.js scripts

Lecture 73 Code Quiz! ISR Bands Page

Lecture 74 UPDATE: on-demand revalidation is out of beta!

Lecture 75 Updating the ISR Cache on Demand

Lecture 76 Writing a Cypress Plug-In for Environment Variable

Lecture 77 ISR Revalidation Test

Lecture 78 Clearing the ISR Cache

Lecture 79 Adding ISR Cache Clearing to Test

Lecture 80 Code Quiz! Revalidate ISR Cache

Lecture 81 SWR Revalidate on Interval

Lecture 82 Testing Revalidate on Interval

Lecture 83 Code Quiz! Revalidate on Interval

Lecture 84 Summary: Testing ISR and Data Updates

Section 8: Testing Authentication

Lecture 85 Introduction to Testing Authentication

Lecture 86 Auth Wrapper in Course App

Lecture 87 Adding Sign-In Details to Cypress

Lecture 88 Testing Success Flow with Auth Wrapper

Lecture 89 SIDE NOTE: Why is this test so dang long?

Lecture 90 Code Quiz! Authentication Failure followed by Success

Lecture 91 Parametrizing Protected Page Tests

Lecture 92 Authenticating Programmatically

Lecture 93 SIDE NOTE: Resources for Authenticating Programmatically

Lecture 94 Code Quiz! Authenticating Programmatically

Lecture 95 Ticket Purchase End-to-End Test

Lecture 96 SIDE NOTE: SWR can’t find updated text (de-duping interval)

Lecture 97 Summary: Testing Authentication

Section 9: Testing Next.js APIs

Lecture 98 Introduction to API Tests

Lecture 99 First API Test

Lecture 100 Fixing Test Errors: Polyfill, resetDB, ignore DB directory in watchlist

Lecture 101 Testing a Route with a URL Param

Lecture 102 Testing a POST Route

Lecture 103 Mocking utils Module for Authentication

Lecture 104 SIDE NOTE: `export` Syntax for Mocked TypeScript Module in Jest

Lecture 105 Write Test using Mocked Module

Lecture 106 Code Quiz! User with No Reservations

Lecture 107 Code Quiz! Post a Reservation

Lecture 108 Fixing Issues with Parallel Tests using Shared Database

Lecture 109 SIDE NOTE: Example of Using Multiple jest.config.js Files

Lecture 110 Updating Mock Function Return Value: Testing Unauthorized Request

Lecture 111 Code Quiz! Updating Mock Function Return Value

Lecture 112 Testing Routes with Query String Params

Lecture 113 Code Quiz! Query String Params

Lecture 114 Summary: Testing Next.js APIs

Lecture 115 Congratulations and Thank You!

Section 10: Further Learning

Lecture 116 Bonus Lecture

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

Course Information:

Udemy | English | 7h 57m | 2.90 GB
Created by: Bonnie Schulkin

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top