This is a quick guide on setting up Cypress End-to-End Testing with Nuxt 3.

I noticed this Github thread about users struggling to get Cypress working with Nuxt 3.

I found the setup straightforward and decided to share how to do it.

Initialize Nuxt project

npx nuxi init nuxt-project
cd nuxt-project
npm install

Install + initialize Cypress

npm install cypress --save-dev
npx cypress open

Running npx cypress open should spawn the cypress test runner. Click E2E Testing, then Chrome for the browser option, and then click Start E2E Testing in Chrome.

Cypress E2E Tests

During the Cypress initialization, the cypress folder should have been created.

By default, Cypress looks for any *.cy.* file within your cypress/e2e directory.

For simplicity's sake, I have the following test in cypress/e2e/spec.cy.js

// cypress/e2e/spec.cy.js
describe('template spec', () => {
  it('passes', () => {
    cy.visit('http://localhost:3000/')
  })
})

This test should pass while your Nuxt 3 application runs on port 3000. It just opens the browser and asserts it loaded.

And that's it. We now have Cypress E2E tests running against our Nuxt 3 application. Hope you enjoyed.

Here's the Github Repo for reference.