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:
Top comments (0)