Next.js Cypress Testing

Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for Unit tests and Integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.

It's built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn about Next.js Cypress Testing.

Next.js Cypress Testing

Next.js is a React framework, which is used to write front-end as well as back-end. In our example, we are going to create a page in which on About Page button click it will redirect us to the About page and by clicking on the back button on the About page it will back to the previous page from where we came to the About page.

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest next-cypress

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd next-cypress

Folder Structure

Dependencies

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"
  },
"devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.2.5"
  }

Step 4: Create a below mentioned commented file name in a code and past the mentioned code.

//File path: src/app/page.js

import Link from "next/link";

export default function Home() {
    return (
        <>
            <h2>
                Go back to the
                previous page | GeeksForGeeks
            </h2>
            <Link href={"/about"} >
                About Page
            </Link>
        </>
    );
}

//File path: src/app/about/page.js

'use client';
import { useRouter } from "next/navigation";

export default function Page() {
    const router = useRouter()

    return (
        <>
            <span>Using useRouter() hook </span>
            <button onClick={
                () => router.back()}>Back</button>
        </>
    );
}

Step 5: Run the Next.js application using the below command.

npm run dev

Cypress Installation Steps

Before we begin make sure node.js in installed in your system.

Step 1: Create a Project Folder and move to it by using following command.

mkdir cypress 
cd cypress

Step 2: Initialize a project and Install Cypress.

npm init -y 
npm install cypress --save-dev

Dependencies

"devDependencies": {
    "cypress": "^13.13.1"
  }

Step 3: After Creating a Project, Run this command to start cypress.

npx cypress open

Step 4: Testing type, Configuration and creating a spec.

• Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
• After that create a new spec then click on your spec name to open your spec in any IDE.

Step 5: Testing HTML File.

• Create a HTML File and open it with any live server extension.
• copy that live server file serve link, for later use.

Example

// File path: cypress/e2e/geeksforgeekss.js

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

    it('Go Back To Previous Page Testing', () => {
        // Check if the heading is displayed
        cy.get('h2').should('contain', 'Go back to the previous page | GeeksForGeeks');

        // Click the About page link
        cy.get('#about').should('contain', 'About Page').click();

        // Check if the About page is loaded correctly
        cy.url().should('include', '/about');
        cy.get('span').should('contain', 'Using useRouter() hook');

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

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

Output

jaimin78

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Next.js