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-devRunning Cypress
The next step is to run cypress in your project. To run Cypress, run the command:
yarn run cypress openAfter 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!👋
