テスト

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

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

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

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

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

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

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

Terminal window
npm init playwright@latest

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

Section titled 初めてのPlaywrightのテストを作成する
  1. テストするページを選択します。ここでは以下のindex.astroページを例として使用します。
src/pages/index.astro
---
---
<html lang="en">
  <head>
    <title>Astro最高!</title>
    <meta name="description" content="Astroの次世代アイランドアーキテクチャーにより、どこからでもコンテンツを取り込み、高速に配信することができます。" />
  </head>
  <body></body>
</html>
  1. 新しいフォルダを作成し、src/testに以下のテストファイルを追加します。以下のテストをファイルに貼り付けて、ページのメタ情報が正しいことを確認します。ページの<title>の値を、テストするページと一致するように更新してください。
src/test/index.spec.ts
test('メタ情報が正しい', async ({ page }) => {
  await page.goto("http://localhost:3000/");

  await expect(page).toHaveTitle('Astro最高!');
});

Playwrightのテストを実行する

Section titled Playwrightのテストを実行する

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

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

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

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

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

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

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

  2. playwright.config.tswebServerオブジェクトを追加し、コマンドの値をyarn previewに設定します。

playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  webServer: {
    command: 'yarn preview',
    url: 'http://localhost:3000/app/',
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:3000/app/',
  },
};
export default config;
  1. yarn buildを実行した上で、yarn test:e2eによりPlaywrightのテストを実行します。

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