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

Testing Next.js Apps with Jest, Testing Library and Cypress, available at $94.99, has an average rating of 4.83, with 118 lectures, 3 quizzes, based on 330 reviews, and has 4137 subscribers.

You will learn about 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 This course is ideal for individuals who are Next . js developers who want to learn how to test all aspects of their app It is particularly useful for Next . js developers who want to learn how to test all aspects of their app.

Enroll now: Testing Next.js Apps with Jest, Testing Library and Cypress

Summary

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

Price: $94.99

Average Rating: 4.83

Number of Lectures: 118

Number of Quizzes: 3

Number of Published Lectures: 116

Number of Published Quizzes: 3

Number of Curriculum Items: 121

Number of Published Curriculum Objects: 119

Original Price: $119.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Course Technologies and Prerequisites

Lecture 3: create-next-app Using with-jest Example

Lecture 4: First Next.js Test

Lecture 5: Course Features: Code Quizzes and Side Notes

Lecture 6: Guide to the Rest of the Course

Chapter 2: Testing Definitions and Philosophy

Lecture 1: Introduction to Testing

Lecture 2: Types of Tests

Lecture 3: What to Test

Lecture 4: Test Redundancy

Lecture 5: Test Granularity Guidelines

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

Lecture 7: Summary: Testing Definitions and Philosophy

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

Lecture 1: Introduction to Course App and Next.js Data Fetching

Lecture 2: Demo of Course App

Lecture 3: Next.js Data Fetching Strategies

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

Lecture 5: CORRECTION to next lecture: generating random strings

Lecture 6: Installing the Course App

Lecture 7: Course App Code Notes

Chapter 4: UI Testing

Lecture 1: Introduction and Technologies

Lecture 2: Testing a Static Page

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

Lecture 4: Testing SSG Props

Lecture 5: SIDE NOTE: About Fake Data for Popular Concert Venue

Lecture 6: Code Quiz! Band Component Error

Lecture 7: Decisions and Guidelines for the Tests So Far

Lecture 8: Introduction to Mock Service Worker

Lecture 9: IMPORTANT! Mock Service Worker version

Lecture 10: Setting up MSW with Next.js

Lecture 11: Adding a MSW Handler

Lecture 12: SIDE NOTE: Troubleshooting MSW Handlers

Lecture 13: Using MSW for a Test: Reservation Component

Lecture 14: Code Quiz! User Reservations

Lecture 15: Different MSW Responses per Test

Lecture 16: Code Quiz! Different MSW Responses per Test

Lecture 17: Summary: UI Testing

Chapter 5: Setting up a Test Database

Lecture 1: WINDOWS AND LINUX USERS: adjustments to npm scripts

Lecture 2: Introduction to Test Databases

Lecture 3: Creating a Test Database

Lecture 4: Environment Variables

Lecture 5: Creating the Test DB and Environment Variables

Lecture 6: SIDE NOTE: Test DB example with cloud server

Lecture 7: Create a Method to Reset the Test DB

Lecture 8: Summary: Setting up a Test Database

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

Lecture 1: TROUBLESHOOTING: app wont build with Nextjs version 12.2 or above

Lecture 2: Introducing testing Next.js Routes and Cypress

Lecture 3: OPTIONAL: Introduction to Cypress

Lecture 4: UPDATE: Cypress 10

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

Lecture 6: Setting up Next.js for Cypress

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

Lecture 8: Setting up Cypress

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

Lecture 10: SIDE NOTE: Running cypress without specifying a path

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

Lecture 12: First Cypress Test: Static Route

Lecture 13: Code Quiz! Static Route

Lecture 14: Testing Dynamic Routes

Lecture 15: Resetting the Database in Cypress

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

Lecture 17: Test Dynamic Route that was Present at Build Time

Lecture 18: Code Quiz! Test route that does not exist

Lecture 19: Test Route Created after Build

Lecture 20: Run all Cypress and Jest Tests

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

Lecture 22: Summary: Testing Next.js Routes and Cypress

Chapter 7: Testing ISR and Data Updates

Lecture 1: Introduction to Testing ISR and Data Updates

Lecture 2: Testing Data Comes from ISR Cache

Lecture 3: First ISR Cache Test

Lecture 4: SIDE NOTE: Next.js scripts

Lecture 5: Code Quiz! ISR Bands Page

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

Lecture 7: Updating the ISR Cache on Demand

Lecture 8: Writing a Cypress Plug-In for Environment Variable

Lecture 9: ISR Revalidation Test

Lecture 10: Clearing the ISR Cache

Lecture 11: Adding ISR Cache Clearing to Test

Lecture 12: Code Quiz! Revalidate ISR Cache

Lecture 13: SWR Revalidate on Interval

Lecture 14: Testing Revalidate on Interval

Lecture 15: Code Quiz! Revalidate on Interval

Lecture 16: Summary: Testing ISR and Data Updates

Chapter 8: Testing Authentication

Lecture 1: Introduction to Testing Authentication

Lecture 2: Auth Wrapper in Course App

Lecture 3: Adding Sign-In Details to Cypress

Lecture 4: Testing Success Flow with Auth Wrapper

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

Lecture 6: Code Quiz! Authentication Failure followed by Success

Instructors

Bonnie Schulkin
Teacher | Coder | Mediocre Bassist

Rating Distribution

1 stars: 5 votes

2 stars: 3 votes

3 stars: 27 votes

4 stars: 83 votes

5 stars: 212 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!