Module A-3·7 min read

Build and test a production-style authentication application (Next.js + Express API) with Jest, RTL, Supertest, Playwright, and GitHub Actions.

Written by Jatin Jain Saraf · Architect of SupraScan

Module 7 — Capstone Project

Who this is for: Every student who wants to solidify their knowledge. Watching tutorials is passive; writing tests against a complex codebase is active learning.

The Challenge: A Production-Ready Testing Suite

In this final module, you will not be writing an application from scratch. Instead, you will be handed a fully functioning, undocumented, untested full-stack application.

Your mission is to wrap this application in a bulletproof testing net, ensuring that future developers can refactor it without fear.

The Application: SecureAuth Pro

SecureAuth Pro is a Next.js (frontend) and Express.js (backend) application backed by PostgreSQL. It features user registration, JWT-based login, password resets, and a protected dashboard.

Project Deliverables

You must implement the entire Testing Pyramid and automate it.

Phase 1: Unit & Integration Testing (Jest & Supertest)

You will focus on the Node.js backend.

1. Middleware Testing: Write unit tests for the JWT authentication middleware. Mock the jsonwebtoken library. Ensure it returns 401 Unauthorized for expired tokens.
2. Database Mocking: Write unit tests for the UserRepository. Mock its underlying database driver (as covered in Module 3's Repository Pattern) to test successful user creation and constraint violations (duplicate emails).
3. API Integration: Use Supertest to spin up the Express app in-memory. Write a test suite for POST /api/auth/login. Assert the response contains a valid token structure when correct credentials are provided.

Phase 2: Frontend Component Testing (React Testing Library)

You will focus on the Next.js frontend.

1. Form Validation: Render the <RegistrationForm />. Use RTL to fill the inputs. Assert that clicking submit with an invalid email format renders an error boundary on the screen.
2. API Mocking: Render the <Dashboard /> component. Mock the global fetch API to simulate a successful data retrieval. Assert that the user's data renders correctly on the screen after the loading state resolves.

Phase 3: End-to-End Testing (Playwright)

You will test the system exactly as a real user would.

1. The Golden Path: Write a Playwright script that navigates to the homepage, clicks "Sign Up", fills the form, submits, logs in, and verifies the dashboard loads.
2. Auth Bypass: Implement a global-setup.js script to save the login state. Write a second test that navigates directly to /dashboard utilizing the saved state, proving it bypasses the login screen.
3. Network Interception: Intercept the backend API call on the login page. Force it to return a 500 Internal Server Error. Assert that the UI gracefully displays a toast notification to the user rather than crashing.