Next.js Testing Explained — Testing Next.js Applications

In this tutorial, you will learn about Next.js Testing Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Testing Next.js applications involves testing server components (no browser), client components (with testing-library), API routes, and integration tests with MSW for API mocking.

What You'll Learn

• Vitest setup for Next.js
• Testing server components
• Testing client components
• Testing API routes
• MSW for API mocking

Why It Matters

Next.js testing requires different approaches for server vs client components. Proper testing catches regressions across the full stack from database to UI.

import { describe, it, expect } from "vitest";
import { GET, POST } from "@/app/api/tasks/route";

describe("Tasks API", () => {
  it("GET returns tasks", async () => {
    const request = new Request("http://localhost:3000/api/tasks");
    const response = await GET(request);
    const data = await response.json();
    expect(response.status).toBe(200);
    expect(Array.isArray(data)).toBe(true);
  });

  it("POST creates a task", async () => {
    const request = new Request("http://localhost:3000/api/tasks", {
      method: "POST",
      body: JSON.stringify({ title: "Test task", priority: "high" }),
    });
    const response = await POST(request);
    const data = await response.json();
    expect(response.status).toBe(201);
    expect(data.title).toBe("Test task");
  });

  it("POST validates required fields", async () => {
    const request = new Request("http://localhost:3000/api/tasks", {
      method: "POST",
      body: JSON.stringify({}),
    });
    const response = await POST(request);
    expect(response.status).toBe(400);
  });
});

Expected output: API tests run against a test database, verifying CRUD operations and validation without needing a running dev server.