コンテンツにスキップ
Astro 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.ts
import { getViteConfig } from 'astro/config';


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

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

Cypress

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

インストール

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

Terminal window
npm install -D cypress

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

設定

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

cypress.config.js
import { defineConfig } from 'cypress'


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

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

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

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

  2. 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');
    });

Cypressのテストを実行する

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

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

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

Terminal window
npx cypress run

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

Terminal window
npx cypress open

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

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

Output from npx cypress run
Running:  index.cy.js                                                                     (1 of 1)




✓ titles are correct (107ms)


1 passing (1s)

次のステップ

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

Playwright

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のテストを作成する

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

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

  2. 新しいフォルダを作成し、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のテストを実行する

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

  1. 上の例のテストをコマンドラインから実行するには、testコマンドを使用します。単一のテストのみを実行する場合は、ファイル名をコマンドに含めます。

    Terminal window
    npx playwright test index.spec.ts

  2. HTML Test Reportの全体を確認するには、次のコマンドを使用して開きます。

    Terminal window
    npx playwright show-report

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

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

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

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

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

    playwright.config.ts
    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/',
      },
    });

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

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