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.

Next, you’ll be asked to select a browser you prefer 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.

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

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.

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

Bonus:

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.