最終更新日: 2023年08月15日

テスト

Nuxtアプリケーションをテストする方法

Info 詳細なモジュール作成ガイドはこちらから。

Nuxt3では、@nuxt/test-utilsの書き直されたバージョンが利用可能です。テストランナーとしてVitestとJestをサポートしています。

インストール

  • npx
  • bash
yarn add --dev @nuxt/test-utils vitest

セットアップ

@nuxt/test-utilsのヘルパーメソッドを利用する各describeブロックで、始める前にテストコンテキストをセットアップする必要があります。

  • ts
import { describe, test } from "vitest";
import { setup, $fetch } from "@nuxt/test-utils";

describe("My test", async () => {
  await setup({
    // test context options
  });

  test("my test", () => {
    // ...
  });
});

裏側では、setupはbeforeAll、beforeEach、afterEach、およびafterAllでいくつかのタスクを実行して、Nuxtのテスト環境を正しくセットアップします。

オプション

Nuxtの設定

rootDir

Nuxt appが配置されるディレクトリへのパス
  • Type: string
  • Default: '.'

configFile

テスト対象のNuxtアプリが配置されるディレクトリへのパス
  • Type: string
  • Default: 'nuxt.config'

セットアップのタイミング

setupTimeout

setupTestがその作業を完了するのに許容される時間（ミリ秒単位）の量（これには、渡されたオプションに応じてNuxtアプリケーションのビルドやファイルの生成などが含まれる場合があります）

  • Type: number
  • Default: 60000

有効にする機能

server

テストスイート内のリクエストに応答するためにサーバーを起動するかどうか

  • Type: boolean
  • Default: true
port

指定された場合、起動されたテストサーバーのポートを指定された値に設定します。

  • Type: number | undefined
  • Default: undefined
build

別のビルドステップを実行するかどうか

  • Type: boolean
  • Default: true (false if browser or server is disabled)
browser

裏側では、NuxtのテストユーティリティはPlaywrightを使用してブラウザテストを実行します。このオプションが設定されている場合、ブラウザが起動され、その後のテストスイートで制御することができます。（詳細はこちらで確認できます。）

  • Type: boolean
  • Default: false
browserOptions

Nuxtのテストユーティリティは、内部的にPlaywrightを使用してブラウザテストを実行します。このオプションが設定されている場合、ブラウザが起動され、その後のテストスイートで制御することができます。（詳細はこちらで確認できます。）

Type: 次のプロパティを持つオブジェクト

  • type: 起動するブラウザのタイプ - chromium、Firefox、Webkit のいずれか
  • launch: ブラウザの起動時に playwright に渡されるオプションのオブジェクト。 API リファレンスを参照してください。
runner

テストスイートのランナーを指定します。現在はVitestが推奨されています。

  • Type: 'vitest' | 'jest'
  • Default: 'vitest'

APIs

レンダリングテストのためのAPI

$fetch(url) サーバーでレンダリングされたページの HTML を取得します。

  • ts
import { $fetch } from '@nuxt/test-utils'
const html = await $fetch('/')

$fetch(url) サーバーでレンダリングされたページのレスポンスを取得します。

  • ts
import { fetch } from '@nuxt/test-utils'

const res = await fetch('/')
const { body, headers } = res

url(path) 指定されたページの完全な URL を取得します（テストサーバーが実行されているポートを含む）。

  • ts
import { url } from '@nuxt/test-utils'

const pageUrl = url('/page')
// 'http://localhost:6840/page'

ブラウザでのテスト