July 13, 2022

Setting up Cypress in your NextJs project

Setting up Cypress in your NextJs project

Cypress is a frontend testing tool built for the modern web that allows a developer to set up, write, run, and debug tests.

With Cypress, you can write all kinds of tests for your project. In short, cypress can test anything that runs in a browser. These tests include:

  • End-to-end tests
  • Integration tests
  • Unit tests

Setting up Cypress in Your Project

To set up Cypress in your project, all you’ll have to do is to run the command below to install Cypress as a development dependency:

yarn add -D cypress
npm install cypress --save-dev

Running Cypress

The next step is to run cypress in your project. To run Cypress, run the command:

yarn run cypress open

After running the command above, Cypress will open a window to allow you to configure Cypress based on your preference.

First, you will be asked the type of test you’ll want to configure with Cypress. Here, you have two options; an End-to-end test or a Component test.

choosing a test type

Next, you’ll be asked to select a browser you prefer to run Cypress.

selecting a preferred browser to run Cypress

Add a test file

Now, you will be presented with a browser window(Cypress App) to create a spec file. What is a spec file?

A spec file is a file where tests are written and can be located in cypress/e2e by default, but can be configured to another directory.

Click on the “create new empty spec” button to add a test file.

adding at test file

Upon clicking the button, you will see a dialog where you can change the spec file name or accept the default name.

create spec file

Write Your First Test!

Type the code below in your spec file and see your test run in real time right after saving your changes.

describe("My first test", () => {
  it("Does not do much!", () => {

For further guidance on how to write tests, checkout cypress documentation here


All along, we have been running cypress in the browser. What if we want to run cypress right within our terminal(headless mode)?

To do that, run the command below:

yarn run cypress run --browser chrome --headless --no-exit
running cypress in headless mode

That will be all for this post. I hope it was helpful one way or the other. Bye!👋