テスト

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

テストは、動作するAstroコードを書き、メンテナンスするために役立ちます。Astroは、Jest、Mocha、Jasmine、Cypress、Playwrightなど、ユニットテスト、コンポーネントテスト、エンドツーエンド（E2E）テスト用の人気ツールを多数サポートしています。UIフレームワークのコンポーネントをテストするために、React Testing Libraryなど特定フレームワーク向けのテストライブラリをインストールすることもできます。

テストフレームワークにより、コードが特定の状況でどのように動作するべきかについてのアサーションまたは期待値を記述し、これらを現在のコードの実際の動作と比較できます。

Vitest

esbuildによるESM、TypeScript、JSXサポートを備えた、Viteネイティブのユニットテストフレームワークです。

AstroのgetViteConfig()ヘルパーをvitest.config.ts設定ファイルで使用すると、Astroプロジェクトの設定ファイルによりVitestを設定できます。

コードをコピー

コードをクリップボードにコピー

// vitest.config.tsimport { getViteConfig } from 'astro/config';export default getViteConfig({  test: {    // Vitestの設定オプション  },});

GitHubのAstro + Vitestスターターテンプレートを参照してください。

Cypress

Cypressは、モダンなウェブのために作成されたフロントエンドテストツールです。Cypressにより、AstroサイトのE2Eテストを記述できます。

インストール

お好みのパッケージマネージャーを使用してCypressをインストールできます。

これにより、プロジェクトの開発用依存関係としてCypressがローカルにインストールされます。

shell

コードをコピー

コードをクリップボードにコピー

pnpm add cypress --save-dev

設定

プロジェクトのルートに、以下の内容のcypress.config.jsファイルを作成します。

コードをコピー

コードをクリップボードにコピー

import { defineConfig } from 'cypress'export default defineConfig({  e2e: {    supportFile: false  }})

最初のCypressのテストを作成する

テストするページを選択します。ここでは以下のindex.astroページを例としてテストします。

html

コードをコピー

コードをクリップボードにコピー

------<html lang="ja">  <head>    <title>Astro最高!</title>    <meta name="description" content="Astroの次世代アイランドアーキテクチャーにより、どこからでもコンテンツを取り込み、高速に配信することができます。" />  </head>  <body>  <h1>Hello world from Astro</h1>  </body></html>

cypress/e2eフォルダにindex.cy.jsファイルを作成します。以下のテストをファイルで使用し、ページのタイトルとヘッダーが正しいことを確認します。
js
コードをコピー
コードをクリップボードにコピー
```
it('タイトルが正しい', () => {  const page = cy.visit('http://localhost:4321');  page.get('title').should('have.text', 'Astro最高!')  page.get('h1').should('have.text', 'Hello world from Astro');});
```
:::tip[baseUrlをセットする] "baseUrl": "http://localhost:4321"をcypress.config.jsの設定ファイルに定義してcy.visit("/")を使用すると、cy.visit("http://localhost:4321/")よりも楽にURLを扱うことができます。 :::

Cypressのテストを実行する

コマンドラインやCypressアプリケーションを通じてCypressを実行できます。アプリケーションは、テストの実行とデバッグのためのビジュアルインターフェースを提供します。

まず、動作中のサイトにCypressがアクセスできるように、開発用サーバーを起動します。

コマンドラインから上の例のテストを実行するには、次のコマンドを実行します。

shell

コードをコピー

コードをクリップボードにコピー

npx cypress run

または、次のコマンドを実行してCypressアプリケーションによりテストを実行します。

shell

コードをコピー

コードをクリップボードにコピー

npx cypress open

Cypressアプリケーションが起動したら、E2E Testingを選択し、テストを実行するブラウザを選択します。

テストの実行が完了すると、緑色のチェックマークが表示され、テストがパスしたことを確認できます。

shell

コードをコピー

コードをクリップボードにコピー

Running:  index.cy.js                                                                     (1 of 1)✓ titles are correct (107ms)1 passing (1s)

:::note[テストを失敗させる] テストが本当に動作しているかを確認するために、index.astroファイルの以下の行を変更します。

astro

コードをコピー

コードをクリップボードにコピー

  <body>    <h1>Hello world from Astro</h1>    <h1>Hello from Astro</h1>  </body>

そしてテストを再実行します。テストが失敗したことを示す赤い「x」が出力されるはずです。 :::

次のステップ

Cypressについての詳細は、以下のリンクを参照してください。

Playwright

Playwrightは、モダンなウェブアプリケーションのためのE2Eテストフレームワークです。Playwright APIをJavaScriptやTypeScriptで使用し、Chromium、WebKit、FirefoxなどのすべてのモダンなレンダリングエンジンでAstroコードをテストできます。

インストール

VS Code拡張機能を使用してテストを実行できます。

または、お好みのパッケージマネージャーを使用してAstroプロジェクトにPlaywrightをインストールできます。CLIの各ステップに従って、JavaScriptかTypeScriptを選択し、テストフォルダを命名し、オプションのGitHub Actionsワークフローを追加してください。

初めてのPlaywrightのテストを作成する

テストするページを選択します。ここでは以下のindex.astroページを例としてテストします。

html

コードをコピー

コードをクリップボードにコピー

------<html lang="ja">  <head>    <title>Astro最高!</title>    <meta name="description" content="Astroの次世代アイランドアーキテクチャーにより、どこからでもコンテンツを取り込み、高速に配信することができます。" />  </head>  <body></body></html>

新しいフォルダを作成し、src/testに以下のテストファイルを追加します。以下のテストをファイルに貼り付けて、ページのメタ情報が正しいことを確認します。ページの<title>の値を、テストするページと一致するように更新してください。
jsx
コードをコピー
コードをクリップボードにコピー
```
import { test, expect } from '@playwright/test';test('メタ情報が正しい', async ({ page }) => {  await page.goto("http://localhost:4321/");  await expect(page).toHaveTitle('Astro最高!');});
```
:::tip[baseurlをセットする] 設定ファイルplaywright.config.tsで"baseURL": "http://localhost:4321"と設定すると、page.goto("http://localhost:4321/")の代わりに、より便利なURLとしてpage.goto("/")を使用できます。 :::

Playwrightのテストを実行する

ひとつまたは複数のテストを、複数のブラウザで実行可能です。デフォルトでは、テスト結果はターミナルに表示されます。必要に応じて、HTML Test Reporterを開いて完全なレポートを表示したり、テスト結果をフィルタリングできます。

上の例のテストをコマンドラインから実行するには、testコマンドを使用します。単一のテストのみを実行する場合は、ファイル名をコマンドに含めます。
sh
コードをコピー
コードをクリップボードにコピー
```
npx playwright test index.spec.ts
```
HTML Test Reportの全体を確認するには、次のコマンドを使用して開きます。
sh
コードをコピー
コードをクリップボードにコピー
```
npx playwright show-report
```

:::tip 実際にデプロイされたサイトにより近付けるため、本番環境のコードをテストしましょう。 :::

応用：テスト中に開発用Webサーバーを起動する

Playwrightの設定ファイルでwebServerオプションを使用すると、テストスクリプトの実行時に、Playwrightに開発用Webサーバーを起動させることもできます。

以下はnpmを使用する場合の設定とコマンドの例です。

プロジェクトのルートにあるpackage.jsonファイルに、"test:e2e": "playwright test"のようにテストスクリプトを追加します。

playwright.config.tsにwebServerオブジェクトを追加し、コマンドの値をnpm run previewに設定します。

コードをコピー

コードをクリップボードにコピー

import { defineConfig } from '@playwright/test';export default defineConfig({  webServer: {    command: 'npm run preview',    url: 'http://localhost:4321/',    timeout: 120 * 1000,    reuseExistingServer: !process.env.CI,  },  use: {    baseURL: 'http://localhost:4321/',  },});

npm run buildを実行した上で、npm run test:e2eによりPlaywrightのテストを実行します。

Playwrightについての詳細は、以下のリンクを参照してください。

Astro コース