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

Understand why we write tests and the tradeoffs shaping testing decisions, including classifications, what to test, and snapshot considerations to guard against bugs.

Explore unit testing, integration testing, and end-to-end testing, emphasizing isolation with mocks of network calls and database functions, and validating component interactions.

Decide what to test by focusing on critical specs, such as requiring login to purchase tickets. Test behavior, not implementation, by simulating language selection and confirming the expected user experience.

Explore how to balance unit, integration, and end-to-end tests by considering granularity, efficiency, and maintenance time to decide test redundancy.

Apply practical test granularity guidelines to balance unit, integration, and end-to-end tests. Avoid over-testing trivial wiring, like static props or endpoints that merely connect functions, and minimize slow Cypress tests.

This lecture explains snapshot tests, why they aren’t taught for components, and how HTML or JSON outputs are saved and compared, highlighting false negatives and diagnostic challenges.

Explore the purpose and definitions of testing, including unit, integration, and end-to-end tests, and note end-to-end tests should always be part of your test suite.

Explore the Popular Concert Venue app and its Next.js data fetching strategies through a live demo, testing examples, and an orientation to the application code and technologies.

Explore a demo concert venue app with live sign in, show listings, band pages, dynamically generated descriptions, ticket purchases, and testable interactions using Next.js, Jest, Testing Library, and Cypress.

Explore Next.js data fetching strategies, including static, SSG, SSR, ESR, ISR, and CSR, with concert app examples. Learn when to use each approach and how they impact SEO and performance.

Set up the course app by cloning or forking the repo, configure environment variable files, install dependencies with npm install, and run npm run dev to view the app.

Explore course app code notes detailing top-level imports, tsconfig and eslint configurations, TypeScript usage, Chakra UI design system, and the JSON-based database powering tests with Jest, Testing Library, and Cypress.

Explore testing Next.js apps with jest, testing library, and mock service worker. Learn to test isolated components with props and mocked API data, plus test file placement in tests directory.

Tests a static Next.js home page using React Testing Library, verifying the splash image and the welcome heading with accessible roles in a UI test.

Test the band page rendered by static site generation, mock getStaticProps data with fake bands, and verify the band heading renders correctly using testing library.

Take a first code quiz to practice testing the band component with different props, validating the error message renders as a heading using a regular expression.

Discusses testing decisions for the band id component, including whether to test get static props, and how unit, integration, and end-to-end tests complement each other for speed and diagnosis.

Introduction to mock service worker explains how intercepting http requests and returning predefined responses keeps tests fast and isolated, enabling client-side rendering tests with predictable API data.

Install mock service worker as a dev dependency and set up msw in a Next.js project, exporting an empty handlers array and configuring the test server with setupServer.

Add an MSW handler to intercept the get shows via API call for a show ID in the reservations component, using the Axios base URL and fake data.

Test the reservation component using msw to mock the API, verifying ten seats are shown as available and not red when the handler returns ten seats.

Walks you through testing the user reservations component with MSW mocks, creating a test file, stubbing the API users/{id}/reservations endpoint, and asserting the purchase more tickets button when reservations exist.

Use mock service worker to return different responses based on the show id in the URL, testing sold out states on the reservations page and hiding the purchase button.

Demonstrates msw response variations by user id, using a ternary to return empty reservations for user zero and fake reservations for user one, and verify the purchase tickets button.

Explore ui testing for Next.js apps with jest, testing library, and mock service worker; test server-side, static, and client-side rendering using props and url-parameter driven responses in __tests__ directory.

Create a dedicated test database to keep test data reliable and predictable, separate from production and dev data, enabling mutations and data refresh during tests.

Create a test database for cloud and a local json file database, isolating each test run with dedicated databases, resetting data between tests, and deleting cloud instances after testing.

Use environment variables to switch between test, development, and production databases in a Next.js app; configure DB URLs in environment files and ensure correct loading of local variants.

Configure a JSON-file based test database and environment variables in the Next.js app to use the correct database per environment. Create local and test templates to guide setup.

Create a reset db method that reads fake data and writes it to the mock database to restore a known state before every test.

Use a dedicated test database (alongside production and development) controlled by environment variables in Next.js, and reset it before each test to keep data in a known state for assertions.

Explore testing Next.js routes with Cypress and understand why route testing cannot rely on isolated components; learn to set up Cypress with npm scripts for a built app.

Cypress runs end-to-end tests in a browser against a built site via its URL, verifying user flows and authentication.

Set up Next.js for Cypress by building and starting the app, then run Cypress against the production-like server. Configure npm scripts and environment variables (test db) per system requirements.

Install and configure Cypress, set a global base URL via a local environment file, and orchestrate test build, start server, and Cypress open to run tests against localhost:3000.

Learn to write a first Cypress test for a static route using the Cypress Testing Library, locating elements with find by commands and verifying the shows page heading upcoming shows.

Practice a code quiz that tests navigation to the bands route with Cypress, emphasizing typing over copying. Verify the heading our illustrious performers and preview dynamic routes by band ID.

Test dynamic routes in a Next.js app by validating get static paths for band IDs and fall back blocking for missing or new IDs, with database reset before each test.

Reset the database before every Cyprus test by integrating a DB reset task in Cyprus plugins, overwriting json files with pristine data to ensure predictable test setups.

Test a dynamic route existed at build time by resetting the db with four json files, then visit band id 1 and verify the Shamrock Pete heading using Cypress.

Write and run tests for an unknown band ID not in the database, verify the 'band not found' error text on the page, and reset the database before visiting.

Test a dynamic route created after the build by adding a band during the Cypress test, then visit the route and verify the avalanche of cheese heading appears.

Run all Cypress and Jest tests non-interactively to validate the project, start the server, and refine Jest patterns to execute only tests in the tests directory.

Learn to test Next.js routes with Cypress by building and running the app, validating static and dynamic routes, ISR caching, and database resets and updates.

Explore testing ISR pages that update after a build, validating initial cache on load, on-demand revalidation, and interval revalidation to keep shows, bands, and seats data accurate.

Explore incremental static regeneration, where server-cached pages update on an interval or on demand, and verify server-rendered data before hydration for seo, using Cypress with JavaScript disabled.

Learn to validate server-rendered content by writing your first ISR cache test with Cypress, disabling JavaScript, and asserting database-provided show dates appear before hydration.

Test that the bands page from the ISR cache shows correct band names, like the Wandering Bunnies, Shamrock, Pete and the Joyous Nun Riot, using Cypress and Testing Library.

Learn how on-demand revalidation updates the ISR cache after data changes, using a secret-protected API route to trigger unstable revalidate and eventually a stable revalidate.

Develop a Cypress plug-in to expose the revalidation secret as an environment variable in the config, so tests can access the revalidation secret during execution.

Write a Cypress ISR revalidation test that posts a new band to the API with a secret, verifies cache revalidation, then reloads the bands page to display the new band.

Demonstrates resetting the ISR cache in Next.js tests by building a test-only API endpoint to trigger revalidation and integrating Cypress to reset the database between tests.

Add a Cyprus command to reset the database and ISR cache between tests, hitting the revalidate endpoint with a secret to restore initial conditions.

practice a code quiz to test ISR cache revalidation for the shows page, adding a show with a revalidate secret and verifying cache updates, then resetting the ISR cache.

See how SWR revalidates data on an interval in a Next.js app to keep the seat count up to date, using the refreshInterval option to auto update without user action.

Test revalidate on interval in Next.js by manipulating time with the Cypress clock, add a reservation to simulate sold out shows, and verify the shows page updates after 30 seconds.

Practice revalidate on interval by testing the reservations page, signing in, and verifying seats update from ten to eight after a 15-second refresh.

Test data delivery from ISR and SSR caches by loading pages with JavaScript off to confirm data appears without server calls, and observe on-demand ISR revalidation and SW revalidate intervals.

Explore testing authentication in a Next.js app with next-auth credentials, covering protected page wrappers and end-to-end flows from shows to tickets, focusing on token and session handling.

Explain how the auth wrapper protects routes, redirects unauthenticated users to sign-in, and remembers login state, while demonstrating per-route tests with Cypress for authentication and login flow.

Add sign-in details to Cypress tests by supplying a username and password via Cypress_ environment variables, sourced from the mock database, to enable sign-in flow.

Demonstrate the successful auth flow for a protected page with the auth wrapper: load unauthenticated, sign in with credentials, then access the page and see user email in the nav.

Practice the authentication flow by failing a login on a protected page, then signing in to reach the requested page. Verify the sign in form, error message, and post-login state.

Parametrize protected page tests with a Cypress fixture of URLs, ensuring each redirects to sign in without repeating full login flows.

Learn to authenticate programmatically in end-to-end tests for Next.js apps by creating a Cypress sign-in command that automates the UI flow and verifies a signed-in state.

Programmatically authenticate in a test, navigate to the user page, click the purchase more tickets button to reach the shoes page, verify upcoming shows, and organize tests into directories.

Build an end-to-end test of a ticket purchase flow for a Next.js app, starting signed out, verifying seats left, signing in, updating tickets to five, purchasing, and confirming in Cypress.

Test authentication flows for the wrapper, validating success and failure. Use Cypress fixtures for protected routes and a custom command to authenticate before tests, plus end-to-end ticket purchase flow test.

Explore why and how to test Next.js api routes independently, focusing on handler functions, http requests and responses, and options like next test api route handler and mocks.

Set up a jest-based test for the Next.js shows API route, verify GET returns 200 and shows data from the test database using fake data.

These fixes polyfill text encoder and decoder for jsdom, reset the database before each test, and ignore db and json files in jest watch mode.

Test a Next.js route with a url param using jest, testing library, and Cypress to verify get api shows returns correct show data for a given id with 200 status.

Test a post route that accepts email and password, returns a user with a token, and verify the JSON structure and headers (content-type: application/json) using a test API handler.

Mock the authentication check to unit test a protected API endpoint. Use jest module mocks with a __mocks__ folder to make validate token always resolve to true.

Test the user reservations API route in a Next.js app by mocking the token validation utility and asserting a 200 response with a user reservations array.

Practice testing Next.js APIs by validating a user with no reservations, using a non-existent user ID and a pre-authenticated context to fetch reservations and expect an empty array.

This code quiz guides you through posting a reservation via the API, validating tokens, and asserting a 201 response, then verifying the user's reservations in a test database.

Diagnose sporadic failures in parallel tests caused by a shared database. Learn fixes like setting max workers to one, or using separate databases and multiple config setups to avoid clashes.

Update the mock return value of the validate token function to false to test a 401 unauthorized response in the reservations API using Jest, Testing Library, and Cypress.

practice updating a mock validate token to simulate an unauthenticated user, send a request for user reservations via the test api handler, and confirm a 401 unauthorized response.

Test routes protected by the ISR revalidation secret using a query string in the API test handler, posting a new show and asserting 401 for an incorrect secret.

Practice adding a query string param to a test api handler by creating a new test file and asserting a 401 status when the revalidation secret is incorrect.

Develop unit tests for Next.js APIs using the test API route handler to simulate requests and mock authentication with Jest, noting the tradeoff of added maintenance time.

Congratulates students on completing the course Testing Next.js Apps with Jest, Testing Library and Cypress, and invites questions in the Q&A and feedback to improve future lessons.