DEV Community

Paula Marín S
Paula Marín S

Posted on

Next.js with Cypress

Hello! As part of my learning experience trying Next.js I thought it would be a good idea to try some testing tools that I really like, so now we are going to talk about Cypress.

Cypress is a test runner used for End-to-End (E2E) and Integration Testing.

For this we are going to follow the instructions in Next.js site, there is a way to have a project in from scratch that also has Cypress running the following command

npx create-next-app@latest --example with-cypress with-cypress-app

But I already have a project that I created before I decided that I wanted Cypress, so we are going to try a manual setup. First check if you have Cypress installed.

npm install --save-dev cypress

And after a minute or so everything is ready to start

npm cypress

Next we have to add Cypress to the package.json scripts field by adding this "cypress": "cypress open" like so

package json

Final step is to run cypress to

npm run cypress

A window will open

cypress window

I will go with the E2E Testing option and it will add some files to my project

cypress e2e config

Then it give 2 options to choose a browser

choose browser

I'll choose Chrome and click the button to start the testing. This will open the cypress window with options to generate examples of tests or you also have the option to create a new test.

cypress app

If you choose to see the examples you are going to get a window like this

examples to add

Then you can see all this different examples of different things that you may want to test

testing examples

Well, I actually don't have nothing interesting to test in my project right now so I'm going to change my index with a message that reads "This is 0" and a button that everytime you click it the number in the message increments by one.

index js

So now we need a small test of the functionality described above.

test file

And finally we can see that the test is passing

running test

I think that is for now, this is the branch with the code. Any questions or anything please let me know!

Cheers!

Related Content:

Top comments (0)