Building Dynamic Web Applications with Next.js/

...

/

End-to-End Testing with Cypress

End-to-End Testing with Cypress

Learn to write tests with Cypress.

We'll cover the following...

Cypress is a powerful testing tool that can test anything that runs on a web browser.
It enables us to write and run unit, integration, and end-to-end tests efficiently by running them on Firefox and Chromium-based browsers (for example, Google Chrome).

Press + to interact

So far, we’ve written tests to understand whether our functions and components are working as expected. Now it’s time to test whether the entire application is working correctly.

To get started with Cypress, we just need to install it as a dev dependency in our project. We’ll be using the same project we used in the previous lesson.

Click the “Run” button below to execute the code. Once the execution is completed, see the output by clicking the link below. 

export PORT=5000
ln -s /app/node_modules/ /usercode/boilerplate 
cd /usercode/boilerplate
npm run dev
Application to be tested

We can edit our main package.json file by adding the following script:

Press + to interact
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test": "jest",
  "cypress": "cypress run",
},

We now need to create a Cypress configuration file. Let’s write a cypress.json file in the project root containing the following content:

Press + to interact
{
  "baseUrl": {{EDUCATIVE_LIVE_VM_URL}}
}

By convention, we’ll be putting our end-to-end tests inside a folder called cypress/, placed at the ...