テスト

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

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

ユニットテストと統合テスト

Vitest

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

AstroのgetViteConfig()ヘルパーをvitest.config.ts設定ファイルで使用して、Astroプロジェクトの設定でVitestをセットアップします:

/// <reference types="vitest/config" />
import { getViteConfig } from 'astro/config';

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

デフォルトでは、getViteConfig()はプロジェクト内のAstro設定ファイルを読み込み、テスト環境に適用しようとします。Astro 4.8以降、テストに適用されるAstro設定をカスタマイズする必要がある場合は、getViteConfig()に第2引数を渡します:

export default getViteConfig(
  { test: { /* Vitestの設定オプション */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

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

VitestとContainer API

追加： astro@4.9.0

Container API (EN)を使用して、Astroコンポーネントをネイティブにテストできます。まず、上記の説明に従ってvitestをセットアップし、コンポーネントをテストするための.test.jsファイルを作成します:

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });

  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

E2Eテスト

Playwright

Playwrightは、モダンなWebアプリ向けのE2Eテストフレームワークです。JavaScriptまたはTypeScriptでPlaywright APIを使用して、Chromium、WebKit、Firefoxを含むすべてのモダンなレンダリングエンジンでAstroコードをテストできます。

インストール

VS Code拡張機能を使用して、テストを行うことができます。

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

npm init playwright@latest

pnpm create playwright

yarn create playwright

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

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

---
---
<html lang="ja">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body></body>
</html>

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

test('meta is correct', async ({ page }) => {
  await page.goto("http://localhost:4321/");

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

Playwrightテストを実行する

単一のテストまたは複数のテストを同時に実行でき、1つまたは複数のブラウザでテストできます。デフォルトでは、テスト結果はターミナルに表示されます。オプションで、HTMLテストレポーターを開いて完全なレポートを表示し、テスト結果をフィルタリングできます。

前の例のテストをコマンドラインから実行するには、testコマンドを使用します。オプションで、ファイル名を指定して単一のテストだけを実行できます:
ターミナルウィンドウ
```
npx playwright test index.spec.ts
```
完全なHTMLテストレポートを表示するには、以下のコマンドで開きます:
ターミナルウィンドウ
```
npx playwright show-report
```

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

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

以下は、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の詳細については、以下のリンクを参照してください:

Cypress

Cypressは、モダンなWeb向けに構築されたフロントエンドテストツールです。CypressでAstroサイトのE2Eテストを書くことができます。

インストール

お好みのパッケージマネージャーを使用してCypressをインストールできます。これにより、Cypressがプロジェクトの開発依存関係としてローカルにインストールされます。

npm install cypress --save-dev

pnpm add --save-dev cypress

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 is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body>
  <h1>Hello world from Astro</h1>
  </body>
</html>

cypress/e2eフォルダにindex.cy.jsファイルを作成します。以下のテストをファイルに記述して、ページのタイトルとヘッダーが正しいことを確認します。
cypress/e2e/index.cy.js
```
it('titles are correct', () => {
  const page = cy.visit('http://localhost:4321');

  page.get('title').should('have.text', 'Astro is awesome!')
  page.get('h1').should('have.text', 'Hello world from Astro');
});
```
cypress.config.js設定ファイルで"baseUrl": "http://localhost:4321"を設定すると、より便利なURLとしてcy.visit("http://localhost:4321/")の代わりにcy.visit("/")を使用できます。

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の詳細については、以下のリンクを参照してください:

NightwatchJS

Nightwatch.jsは、すべての主要なブラウザとそのモバイル版、およびネイティブモバイルアプリケーションをビルトインでサポートする、Web全体でテストを書き、実行し、デバッグするための強力なツールセットを備えたテスト自動化フレームワークです。

インストール

お好みのパッケージマネージャーを使用して、AstroプロジェクトにNightwatchJSをインストールできます。CLIの手順に従って、JavaScript/TypeScriptを選択し、テストフォルダに名前を付け、コンポーネントテストとモバイルブラウザでのテストを含めるかどうかを選択します。

npm init nightwatch@latest

pnpm create nightwatch

yarn create nightwatch

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

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

---
---
<html lang="ja">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body></body>
</html>

新しいフォルダsrc/test/を作成し、以下のテストファイルを追加します:
src/test/index.js
```
describe('Astro testing with Nightwatch', function () {
    before(browser => browser.navigateTo('http://localhost:4321/'));

    it("check that the title is correct", function (browser) {
        browser.assert.titleEquals('Astro is awesome!')
    });

    after(browser => browser.end());
});
```
nightwatch.conf.js設定ファイルで"baseURL": "http://localhost:4321"を設定すると、より便利なURLとしてbrowser.navigateTo("http://localhost:4321/")の代わりにbrowser.navigateTo("/")を使用できます。

NightwatchJSテストを実行する

NightwatchJS VSCode拡張機能を使用するか、以下のCLI手順を使用してテストを実行できます:

すべてのテストを実行するには、ターミナルで以下のコマンドを入力します。オプションで、ファイル名を指定して単一のテストだけを実行できます:
ターミナルウィンドウ
```
npx nightwatch test/index.js
```
さらに、--environmentまたは-eCLI引数を使用して、特定のブラウザでテストを実行できます。関連するブラウザがインストールされていない場合、NightwatchはSelenium Managerを使用してセットアップを試みます:
ターミナルウィンドウ
```
npx nightwatch test/index.ts -e firefox
```
完全なHTMLテストレポートを表示するには、以下のコマンドで開きます:
ターミナルウィンドウ
```
npx nightwatch test/index.ts --open
```

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

貢献するコミュニティスポンサー