Next.jsでのCypressのセットアップ
Cypressはエンドツーエンド(E2E)およびコンポーネントテストのためのテストランナーです。このページでは、Next.jsでCypressをセットアップし、最初のテストを書く方法を紹介します。
警告:
- TypeScript version 5の
moduleResolution:"bundler"
を使用する場合、Cypressのバージョン13.6.3より下のバージョンはサポートしていません。ただし、この問題は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
Cypressのopen
コマンドをpackage.json
のscriptsフィールドに追加します:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"cypress:open": "cypress open"
}
}
Cypressテストスイートを開くために、最初にCypressを実行します:
npm run cypress:open
E2E Testingおよび/またはComponent Testingを設定することができます。これらのオプションのいずれかを選択すると、プロジェクトにcypress.config.js
ファイルとcypress
フォルダーが自動的に作成されます。
最初のCypress E2Eテストの作成
cypress.config
ファイルに次の設定がされていることを確認します:
- TypeScript
- JavaScript
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {},
},
})
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {},
},
})
次に、2つの新しいNext.jsファイルを作成します:
import Link from 'next/link'
export default function Page() {
return (
<div>
<h1>Home</h1>
<Link href="/about">About</Link>
</div>
)
}
import Link from 'next/link'
export default function Page() {
return (
<div>
<h1>About</h1>
<Link href="/">Home</Link>
</div>
)
}
ナビゲーションが正しく動作しているかを確認するテストを追加します:
describe('Navigation', () => {
it('should navigate to the about page', () => {
// インデックスページから開始
cy.visit('http://localhost:3000/')
// href属性に"about"が含まれているリンクを探してクリック
cy.get('a[href*="about"]').click()
// 新しいURLには"/about"が含まれているべき
cy.url().should('include', '/about')
// 新しいページには"About"というh1が存在するべき
cy.get('h1').contains('About')
})
})
E2Eテストの実行
Cypressはユーザーがアプリケーションをナビゲートする様子をシミュレートしますので、Next.jsサーバーが実行中である必要があります。アプリケーションがどのように動作するかをより正確に模倣するために、プロダクションコードに対してテストを実行することをお勧めします。
Next.jsアプリケーションをビルドするにはnpm run build && npm run start
を実行し、その後、別のターミナルウインドウでnpm run cypress:open
を実行してCypressを開始し、E2Eテストスイートを実行します。
Good to know:
cypress.config.js
の設定ファイルにbaseUrl: 'http://localhost:3000'
を追加することで、cy.visit("http://localhost:3000/")
の代わりにcy.visit("/")
を使用できます。- あるいは、Cypressと一緒にNext.jsプロダクションサーバーを実行するために
start-server-and-test
パッケージをインストールすることもできます。インストール後、package.json
のscriptsフィールドに"test": "start-server-and-test start http://localhost:3000 cypress"
を追加します。新しい変更後にアプリケーションを再ビルドすることを忘れないでください。
最初のCypressコンポーネントテストの作成
コンポーネントテストは、アプリケーション全体をバンドルしたりサーバーを起動したりすることなく、特定のコンポーネントをビルドしてマウントします。
Cypressアプリでコンポーネントテストを選択し、フロントエンドフレームワークとしてNext.jsを選択します。プロジェクトにcypress/component
フォルダーが作成され、cypress.config.js
ファイルが更新されてコンポーネントテストが有効になります。
cypress.config
ファイルに次の設定がされていることを確認します:
- TypeScript
- JavaScript
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'next',
bundler: 'webpack',
},
},
})
const { defineConfig } = require('cypress')
module.exports = defineConfig({
component: {
devServer: {
framework: 'next',
bundler: 'webpack',
},
},
})
前のセクションの同じコンポーネントを使用して、コンポーネントが期待される出力をレンダリングしているかを確認するテストを追加します:
import Page from '../../app/page'
describe('<Page />', () => {
it('should render and display expected content', () => {
// Homeページ用のReactコンポーネントをマウント
cy.mount(<Page />)
// 新しいページには"Home"というh1が存在するべき
cy.get('h1').contains('Home')
// 期待されるURLを持つリンクが存在するか確認
// リンクをたどるのはE2Eテストに適しています
cy.get('a[href="/about"]').should('be.visible')
})
})
Good to know:
- Cypressは現在、
async
なServer Componentのコンポーネントテストをサポートしていません。E2Eテストを利用することをお勧めします。- コンポーネントテストはNext.jsサーバーを必要としないため、サーバーが利用可能であることを前提とする
<Image />
のような機能はそのままでは動作しない可能性があります。
コンポーネントテストの実行
ターミナルでnpm run cypress:open
を実行してCypressを始め、コンポーネントテストスイートを実行します。
継続的インテグレーション(CI)
インタラクティブなテストに加え、cypress run
コマンドを使用してCypressをヘッドレスで実行することもできます。これはCI環境により適しています:
{
"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"
}
}
Cypressと継続的インテグレーションについて詳しくは、以下のリソースをご覧ください: