Testing & Deployment

A professional React and Next.js application needs thorough testing and a reliable deployment pipeline. This lesson covers Jest, React Testing Library, testing components, hooks, and pages, end-to-end testing with Playwright, deploying to Vercel and self-hosted environments, and managing environment variables.

---

Testing Stack

Tool	Purpose
Jest	Test runner and assertion library
React Testing Library	Testing React components from the user's perspective
Playwright	End-to-end browser testing
MSW (Mock Service Worker)	Mocking API requests

Installation

npm install -D jest @jest/globals ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom

Jest Configuration

// jest.config.ts
import type { Config } from "jest";
import nextJest from "next/jest";

const createJestConfig = nextJest({ dir: "./" });

const config: Config = {
  testEnvironment: "jsdom",
  setupFilesAfterSetup: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

export default createJestConfig(config);

// jest.setup.ts
import "@testing-library/jest-dom";

---

Testing Components

React Testing Library encourages testing from the user's perspective — find elements by their role, label, or text, not by CSS class or test ID:

// Button.tsx
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  disabled?: boolean;
}