テスト

テストは、動作する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を設定できます。

import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Vitestの設定オプション
  },
});

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

Cypress

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

インストール

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

npm install -D cypress

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

pnpm add cypress --save-dev

yarn add cypress --dev

設定

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

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    supportFile: false
  }
})

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

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

---
---
<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ファイルを作成します。以下のテストをファイルで使用し、ページのタイトルとヘッダーが正しいことを確認します。
cypress/e2e/index.cy.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');
});
```
"baseUrl": "http://localhost:4321"をcypress.config.jsの設定ファイルに定義してcy.visit("/")を使用すると、cy.visit("http://localhost:4321/")よりも楽にURLを扱うことができます。

Cypressのテストを実行する

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

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

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

npx cypress run

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

npx cypress open

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

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

Running:  index.cy.js                                                                     (1 of 1)


✓ titles are correct (107ms)

1 passing (1s)

テストが本当に動作しているかを確認するために、index.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ワークフローを追加してください。

npm init playwright@latest

pnpm dlx create-playwright

yarn create playwright

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

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

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

新しいフォルダを作成し、src/testに以下のテストファイルを追加します。以下のテストをファイルに貼り付けて、ページのメタ情報が正しいことを確認します。ページの<title>の値を、テストするページと一致するように更新してください。
src/test/index.spec.ts
```
import { test, expect } from '@playwright/test';

test('メタ情報が正しい', async ({ page }) => {
  await page.goto("http://localhost:4321/");

  await expect(page).toHaveTitle('Astro最高!');
});
```
設定ファイルplaywright.config.tsで"baseURL": "http://localhost:4321"と設定すると、page.goto("http://localhost:4321/")の代わりに、より便利なURLとしてpage.goto("/")を使用できます。

Playwrightのテストを実行する

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

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

応用：テスト中に開発用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/',
  },
});