使用 Next.js 設定 Cypress

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

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

npm run cypress:open

const { defineConfig } = require('cypress')
 
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
  },
})

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

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

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('https://127.0.0.1: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')
  })
})

執行端對端測試

注意事項

• 您可以透過在 cypress.config.js 設定檔中加入 baseUrl: 'https://127.0.0.1:3000'，使用 cy.visit("/") 取代 cy.visit("https://127.0.0.1:3000/")。
• 或者，您可以安裝 start-server-and-test 套件，以便與 Cypress 一起執行 Next.js production 伺服器。安裝完成後，在您的 package.json scripts 欄位中加入 "test": "start-server-and-test start https://127.0.0.1:3000 cypress"。記得在程式碼變更後重新建置您的應用程式。

建立您的第一個 Cypress 元件測試

元件測試會建置並掛載特定元件，而無需打包整個應用程式或啟動伺服器。

在 Cypress 應用程式中選擇「元件測試」，然後選擇「Next.js」作為您的前端框架。您的專案中將會建立一個 cypress/component 資料夾，並且 cypress.config.js 檔案將會更新以啟用元件測試。

確保您的 cypress.config.js 檔案具有以下設定：

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',
    },
  },
})

假設使用與上一節相同的元件，請新增一個測試來驗證元件是否呈現預期的輸出。

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')
  })
})

注意事項:

• Cypress 目前不支援 async 伺服器元件的元件測試。我們建議您使用端對端 (E2E) 測試。
• 由於元件測試不需要 Next.js 伺服器，因此依賴伺服器才能運作的功能 (例如 <Image />) 可能無法直接使用。

執行元件測試

在您的終端機中執行 npm run cypress:open 以啟動 Cypress 並執行您的元件測試套件。

持續整合 (CI)

除了互動式測試之外，您也可以使用 cypress run 指令以無介面模式執行 Cypress，這更適合 CI 環境。

{
  "scripts": {
    //...
    "e2e": "start-server-and-test dev https://127.0.0.1:3000 \"cypress open --e2e\"",
    "e2e:headless": "start-server-and-test dev https://127.0.0.1:3000 \"cypress run --e2e\"",
    "component": "cypress open --component",
    "component:headless": "cypress run --component"
  }
}

您可以從以下資源進一步了解 Cypress 和持續整合。

• Next.js 搭配 Cypress 範例
• Cypress 持續整合文件
• Cypress GitHub Actions 指南
• 官方 Cypress GitHub Action
• Cypress Discord