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

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

Final step is to run cypress to

npm run cypress

A window will open

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

Then it give 2 options to choose a 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.

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

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

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.

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

And finally we can see that the test is passing

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

Cheers!

Related Content:

• Trying Next.js

• Deployment with Next.js

• Next.js and Typescript