コンテンツへスキップ
アプリケーションの構築テストCypress

Next.jsでCypressをセットアップする

Cypressは、エンドツーエンド (E2E) テストとコンポーネントテストに使用されるテストランナーです。このページでは、Next.jsでCypressをセットアップし、初めてのテストを作成する方法を紹介します。

警告

  • Cypressバージョン13.6.3より前のバージョンは、TypeScriptバージョン5とmoduleResolution:"bundler"をサポートしていません。しかし、この問題はCypressバージョン13.6.3以降で解決されています。Cypress v13.6.3

クイックスタート

create-next-appをwith-cypressの例と一緒に使用すると、すぐに始めることができます。

ターミナル
npx create-next-app@latest --example with-cypress with-cypress-app

手動セットアップ

Cypressを手動でセットアップするには、`cypress`を開発依存としてインストールします

ターミナル
npm install -D cypress
# or
yarn add -D cypress
# or
pnpm install -D cypress

`package.json`の`scripts`フィールドにCypressの`open`コマンドを追加します

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

初めてCypressを実行して、Cypressテストスイートを開きます

ターミナル
npm run cypress:open

E2Eテストまたはコンポーネントテストを設定できます。これらのオプションのいずれかを選択すると、プロジェクトに`cypress.config.js`ファイルと`cypress`フォルダが自動的に作成されます。

初めてのCypress E2Eテストの作成

`cypress.config`ファイルに以下の設定があることを確認してください

cypress.config.ts
import { defineConfig } from 'cypress'
 
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
  },
})

次に、新しいNext.jsファイルを2つ作成します

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

ナビゲーションが正しく機能していることを確認するためのテストを追加します

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

E2Eテストの実行

Cypressはユーザーがアプリケーションをナビゲートするのをシミュレートするため、Next.jsサーバーが実行されている必要があります。アプリケーションがどのように動作するかをより正確に再現するために、本番コードに対してテストを実行することをお勧めします。

`npm run build && npm run start`を実行してNext.jsアプリケーションをビルドし、別のターミナルウィンドウで`npm run cypress:open`を実行してCypressを起動し、E2Eテストスイートを実行します。

参考情報

  • `cypress.config.js`設定ファイルに`baseUrl: 'https://:3000'`を追加することで、`cy.visit("https://:3000/")`の代わりに`cy.visit("/")`を使用できます。
  • あるいは、Cypressと連携してNext.jsの本番サーバーを実行するために、start-server-and-testパッケージをインストールできます。インストール後、"test": "start-server-and-test start https://:3000 cypress"をpackage.jsonの`scripts`フィールドに追加します。変更を加えた後は、アプリケーションを再ビルドすることを忘れないでください。

初めてのCypressコンポーネントテストの作成

コンポーネントテストは、アプリケーション全体をバンドルしたりサーバーを起動したりすることなく、特定のコンポーネントをビルドしてマウントします。

Cypressアプリでコンポーネントテストを選択し、フロントエンドフレームワークとしてNext.jsを選択します。プロジェクトに`cypress/component`フォルダが作成され、`cypress.config.js`ファイルがコンポーネントテストを有効にするように更新されます。

`cypress.config`ファイルに以下の設定があることを確認してください

cypress.config.ts
import { defineConfig } from 'cypress'
 
export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})

前のセクションと同じコンポーネントを仮定して、コンポーネントが期待される出力をレンダリングしていることを検証するテストを追加します

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

参考情報:

  • Cypressは現在、`async`サーバーコンポーネントのコンポーネントテストをサポートしていません。E2Eテストの使用をお勧めします。
  • コンポーネントテストはNext.jsサーバーを必要としないため、サーバーが利用可能であることを前提とする<Image />のような機能は、そのままでは動作しない場合があります。

コンポーネントテストの実行

ターミナルで`npm run cypress:open`を実行してCypressを起動し、コンポーネントテストスイートを実行します。

継続的インテグレーション (CI)

インタラクティブなテストに加えて、`cypress run`コマンドを使用してCypressをヘッドレスで実行することもできます。これはCI環境により適しています。

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

これらのリソースからCypressと継続的インテグレーションについてさらに学ぶことができます