Setting up Cypress with Next.js

Cypress , Uçtan Uca (E2E) ve Bileşen Testi için kullanılan bir test çalıştırıcısıdır. Bu sayfa size Cypress'i Next.js ile nasıl kuracağınızı ve ilk testlerinizi nasıl yazacağınızı gösterecektir.

Uyarı:

  • Bileşen testi için Cypress şu anda Next.js sürüm 14 ve async Sunucu Bileşenlerini desteklemiyor. Bu sorunlar takip edilmektedir. Şimdilik, bileşen testi Next.js sürüm 13 ile çalışıyor ve async Sunucu Bileşenleri için E2E testini öneriyoruz.
  • Cypress şu anda moduleResolution:"bundler" ile TypeScript sürüm 5 'u desteklemiyor. Bu sorun takip ediliyor.

Manual setup

Cypress'i manuel olarak kurmak için cypress adresini bir geliştirme bağımlılığı olarak yükleyin:

Terminal 
npm install -D cypress
# or
yarn add -D cypress
# or
pnpm install -D cypress

Cypress open komutunu package.json komut dosyaları alanına ekleyin:

package.json 
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress:open": "cypress open"
  }
}

Cypress test paketini açmak için Cypress'i ilk kez çalıştırın:

Terminal 
npm run cypress:open

E2E Testini ve/veya Bileşen Testini yapılandırmayı seçebilirsiniz. Bu seçeneklerden herhangi birinin seçilmesi, projenizde otomatik olarak bir cypress.config.js dosyası ve bir cypress klasörü oluşturacaktır.

Creating your first Cypress E2E test

cypress.config.js dosyanızın aşağıdaki yapılandırmaya sahip olduğundan emin olun:

cypress.config.ts 
import { defineConfig } from 'cypress'
 
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
  },
})
cypress.config.js 
const { defineConfig } = require('cypress')
 
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
  },
})

Ardından, iki yeni Next.js dosyası oluşturun:

pages/index.js 
import Link from 'next/link'
 
export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
pages/about.js 
import Link from 'next/link'
 
export default function About() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}

Navigasyonunuzun doğru çalıştığını kontrol etmek için bir test ekleyin:

cypress/e2e/app.cy.js 
describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('http://localhost:3000/')
 
    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href*="about"]').click()
 
    // The new url should include "/about"
    cy.url().should('include', '/about')
 
    // The new page should contain an h1 with "About"
    cy.get('h1').contains('About')
  })
})

Running E2E Tests

Cypress, uygulamanızda gezinen bir kullanıcıyı simüle edecektir, bunun için Next.js sunucunuzun çalışıyor olması gerekir. Uygulamanızın nasıl davranacağına daha yakından benzemek için testlerinizi üretim kodunuza karşı çalıştırmanızı öneririz.

Next.js uygulamanızı oluşturmak için npm run build && npm run start adresini çalıştırın, ardından Cypress'i başlatmak ve E2E test paketinizi çalıştırmak için başka bir terminal penceresinde npm run cypress:open adresini çalıştırın.

Bilmekte fayda var:

  • cypress.config.js yapılandırma dosyasına baseUrl: 'http://localhost:3000' ekleyerek cy.visit("http://localhost:3000/") yerine cy.visit("/") kullanabilirsiniz.
  • Alternatif olarak, Next.js üretim sunucusunu Cypress ile birlikte çalıştırmak için start-server-and-test paketini yükleyebilirsiniz. Kurulumdan sonra "test": "start-server-and-test start http://localhost:3000 cypress" adresini package.json komut dosyaları alanınıza ekleyin. Yeni değişikliklerden sonra uygulamanızı yeniden oluşturmayı unutmayın.

Creating your first Cypress component test

Bileşen testleri, tüm uygulamanızı paketlemek veya bir sunucu başlatmak zorunda kalmadan belirli bir bileşeni derler ve monte eder.

Cypress uygulamasında Bileşen Testi 'ni seçin, ardından ön uç çerçeveniz olarak Next.js 'yi seçin. Projenizde bir cypress/component klasörü oluşturulacak ve bileşen testini etkinleştirmek için bir cypress.config.js dosyası güncellenecektir.

cypress.config.js dosyanızın aşağıdaki yapılandırmaya sahip olduğundan emin olun:

cypress.config.ts 
import { defineConfig } from 'cypress'
 
export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})
cypress.config.js 
const { defineConfig } = require('cypress')
 
module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})

Önceki bölümdeki bileşenlerin aynı olduğunu varsayarak, bir bileşenin beklenen çıktıyı oluşturduğunu doğrulamak için bir test ekleyin:

cypress/component/about.cy.js 
import AboutPage from '../../pages/about'
 
describe('<AboutPage />', () => {
  it('should render and display expected content', () => {
    // Mount the React component for the About page
    cy.mount(<AboutPage />)
 
    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About')
 
    // Validate that a link with the expected URL is present
    // *Following* the link is better suited to an E2E test
    cy.get('a[href="/"]').should('be.visible')
  })
})

Bildiğim iyi oldu:

  • Cypress şu anda async Sunucu Bileşenleri için bileşen testini desteklememektedir. E2E testini kullanmanızı öneririz.
  • Bileşen testleri bir Next.js sunucusu gerektirmediğinden, <Image /> gibi bir sunucunun kullanılabilir olmasına dayanan özellikler kullanıma hazır olarak çalışmayabilir.

Running Component Tests

Cypress'i başlatmak ve bileşen test paketinizi çalıştırmak için terminalinizde npm run cypress:open adresini çalıştırın.

Continuous Integration (CI)

Etkileşimli teste ek olarak, CI ortamları için daha uygun olan cypress run komutunu kullanarak Cypress'i başsız olarak da çalıştırabilirsiniz:

package.json 
{
  "scripts": {
    //...
    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
    "component": "cypress open --component",
    "component:headless": "cypress run --component"
  }
}

Bu kaynaklardan Cypress ve Sürekli Entegrasyon hakkında daha fazla bilgi edinebilirsiniz: