Next.js with Cypress
Tags: javascript, react, nextjs, testing
Published: 2023-02-07 15:48:50

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbnn244srzswzy17k3ay.png)

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

![package json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ugtwf01rdlgnttdft0o.png)

Final step is to run cypress to 

`npm run cypress`

A window will open

![cypress window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h5xh33wottkihgw1lsk.png)

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

![cypress e2e config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ig182pr0ds6019qb410q.png)

Then it give 2 options to choose a browser

![choose browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5xmxin6c6ef4yuzqh8b.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhc2cxrcbneu201tkgav.png)

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

![examples to add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ael8iavq35pt237tr942.png)

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

![testing examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxkaxt5mpxa2wb39uf3j.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe5l5mvq2jg6bke3gv6j.png)

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

![test file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2zaqf1f4dfpinuvdxr9.png)

And finally we can see that the test is passing

![running test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw76w9u1i6wkcazq4n3n.png)

I think that is for now, this is the [branch](https://github.com/celest67/nextjs-try1/tree/testing-cypress) with the code. Any questions or anything please let me know!

Cheers!


Related Content:

- [Trying Next.js](https://dev.to/celest67/trying-nextjs-4ee4)

- [Deployment with Next.js](https://dev.to/celest67/deployment-with-nextjs-41j7)

- [Next.js and Typescript](https://dev.to/celest67/nextjs-and-typescript-55ha)