Cypress Testing in Next.js

Cypress is a popular end-to-end testing framework that integrates well with Next.js to automate browser testing and verify application behavior through real user interactions.

Automates end-to-end testing in a real browser.
Simulates user interactions such as clicks, navigation, and form submissions.
Supports fast, reliable, and interactive test execution.
Improves application quality by validating complete user workflows.

Steps to Set Up Cypress Testing in Next.js

Follow the steps given below:

Step 1: Create a New Next.js Application

Create a Next.js project using the following commands:

npx create-next-app@latest next-cypress-app
cd next-cypress-app

Step 2: Install Cypress

Install Cypress as a development dependency.

npm install --save-dev cypress

Step 3: Open Cypress

Run the following command to launch the Cypress Test Runner:

npx cypress open

Choose E2E Testing, complete the initial configuration, select a browser, and create a new test specification.

Step 4: Create the Application

Create the following files:

app/
├── page.js
└── about/
    └── page.js

Add the following code.

app/page.js

import Link from "next/link";

export default function Home() {
  return (
    <div
      style={{
        padding: "30px",
        fontFamily: "Arial, Helvetica, sans-serif",
      }}
    >
      <h2
        style={{
          fontSize: "24px",
          fontWeight: "bold",
          marginBottom: "20px",
        }}
      >
        Go back to the previous page | GeeksForGeeks
      </h2>

      <Link
        id="about"
        href="/about"
        style={{
          color: "#0645AD",
          fontSize: "20px",
          textDecoration: "underline",
        }}
      >
        About Page
      </Link>
    </div>
  );
}

app/about/page.js

"use client";

import { useRouter } from "next/navigation";

export default function About() {
  const router = useRouter();

  return (
    <div
      style={{
        padding: "30px",
        fontFamily: "Arial, Helvetica, sans-serif",
      }}
    >
      <span
        style={{
          fontSize: "22px",
          marginRight: "12px",
        }}
      >
        Using useRouter() hook
      </span>

      <button
        onClick={() => router.back()}
        style={{
          padding: "2px 8px",
          border: "1px solid #767676",
          backgroundColor: "#efefef",
          color: "#000",
          borderRadius: "2px",
          cursor: "pointer",
          fontSize: "14px",
          fontFamily: "Arial, Helvetica, sans-serif",
          appearance: "button",
          WebkitAppearance: "button",
        }}
      >
        Back
      </button>
    </div>
  );
}

Step 5: Create Test Files

After the initial setup, Cypress automatically creates the required folders. Create a test file named geeksforgeeks.cy.js inside the cypress/e2e directory and add the following code.

cypress/e2e/geeksforgeekss.js

describe("Cypress Next.js Testing", () => {
    beforeEach(() => {
        cy.visit("http://localhost:3000/");
    });

    it("Go Back To Previous Page Testing", () => {
        // Verify the heading on the Home page
        cy.get("h2").should(
            "contain",
            "Go back to the previous page | GeeksForGeeks"
        );

        // Verify the About Page link and click it
        cy.get("#about")
            .should("contain", "About Page")
            .click();

        // Verify that the About page is loaded
        cy.url().should("include", "/about");
        cy.get("span").should(
            "contain",
            "Using useRouter() hook"
        );

        // Click the Back button
        cy.get("button")
            .should("contain", "Back")
            .click();

        // Verify that the user is back on the Home page
        cy.url().should("eq", "http://localhost:3000/");
        cy.get("h2").should(
            "contain",
            "Go back to the previous page | GeeksForGeeks"
        );
    });
});

Project structure:

next-cypress-app/
│
├── app/
│   ├── page.js
│   └── about/
│       └── page.js
├── cypress/
│   ├── e2e/
│   │   └── geeksforgeeks.cy.js
│   ├── fixtures/
│   └── support/
├── package.json
└── ...

Step 6: Run the Tests

Start the Next.js development server:

npm run dev

Then execute the Cypress tests from the Cypress Test Runner or run them in headless mode:

npx cypress run

Output: