Setting Up Testing in Next.js with Cypress, Jest, Playwright & Vitest – Testing Is Love Made Visible

Testing Tools in Next.js

Tool	Best For
Cypress	End-to-End + Component Testing
Jest	Unit + Snapshot Testing
Playwright	Cross-Browser E2E
Vitest	Fast, Vite-powered Unit Testing

1. Cypress – E2E + Component Testing

npm install -D cypress
npx cypress open

In package.json:

"scripts": {
  "cypress:open": "cypress open"
}

Sample E2E test:

cy.visit('/')
cy.get('a[href*="about"]').click()
cy.url().should('include', '/about')

Sample component test:

cy.mount(<Page />)
cy.get('h1').should('contain', 'Home')

2. Jest – Unit + Snapshot Testing

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
npm init jest@latest

In jest.config.ts:

testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']

Sample test:

render(<Page />)
expect(screen.getByRole('heading')).toBeInTheDocument()

Snapshot test:

expect(container).toMatchSnapshot()

3. Playwright – Cross-Browser E2E

npm init playwright@latest

Sample test:

await page.goto('/')
await page.click('text=About')
expect(page).toHaveURL('/about')

4. Vitest – Fast Unit Testing

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react

In vitest.config.mts:

test: {
  environment: 'jsdom',
  globals: true,
}

Sample test:

render(<Page />)
expect(screen.getByRole('heading', { name: 'Home' })).toBeDefined()

Recommended Testing Strategy

• Unit: Vitest or Jest
• Component: Cypress Component
• E2E: Playwright or Cypress
• CI/CD: Run all in headless mode

CI/CD Scripts in package.json

"scripts": {
  "test": "vitest",
  "test:watch": "vitest --watch",
  "test:jest": "jest",
  "e2e": "start-server-and-test start http://localhost:3000 cypress",
  "e2e:headless": "start-server-and-test start http://localhost:3000 \"cypress run\"",
  "playwright": "playwright test",
  "playwright:headless": "playwright test --headless"
}