راه‌اندازی تست در Next.js Cypress، Jest، Playwright و Vitest – تست یعنی عشق قابل مشاهده

ابزارهای تست در Next.js

ابزار	مناسب برای
Cypress	تست End-to-End و کامپوننت
Jest	تست واحد و snapshot
Playwright	تست بین مرورگرها
Vitest	تست سریع و TDD

۱. Cypress – تست E2E و کامپوننت

npm install -D cypress
npx cypress open

در package.json:

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

نمونه تست E2E:

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

نمونه تست کامپوننت:

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

۲. Jest – تست واحد و snapshot

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

در jest.config.ts:

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

نمونه تست:

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

تست snapshot:

expect(container).toMatchSnapshot()

۳. Playwright – تست بین مرورگرها

npm init playwright@latest

نمونه تست:

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

۴. Vitest – تست سریع و TDD

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

در vitest.config.mts:

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

نمونه تست:

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

استراتژی تست پیشنهادی

• تست واحد: Vitest یا Jest
• تست کامپوننت: Cypress
• تست E2E: Playwright یا Cypress
• CI/CD: اجرای همه در حالت headless

اسکریپت‌های CI در 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"
}