[和訳] Nuxt3 公式サイト~Testing
この記事について
この記事はNuxt3 公式サイト Testing を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。 所々自分の理解のために参考になりそうな別サイトのリンクを貼ってあります。
Testing
Nuxt アプリケーションのテスト方法
Nuxt3 では、@nuxt/test-utils を書き直したバージョンがあります。テストランナーとして、Vitest と Jest をサポートしています。
Installation
> yarn add --dev @nuxt/test_utils vitest
Setup
nuxt/test_utils ヘルパーメソッドを利用する各説明ブロックでは、開始前にテストコンテキストをセットアップする必要があります。
import { describe, test } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils'
describe('My test', async () => {
await setup({
// テストコンテキストのオプション
})
test('my test', () => {
// ...
})
})
裏側では、beforeAll、beforeEach、afterEach、afterAll の中で Nuxt のテスト環境を正しくセットアップするためのさまざまなタスクが setup によって実行されます。
Options
Nuxt Configuration
rootDir
テスト対象となる Nuxt アプリがあるディレクトリへのパス
- 型: string
- デフォルト値:
'.'
configFile
設定ファイルの名前
- 型: string
- デフォルト値:
'nuxt.config'
Setup Timings
setupTimeout
setupTest が作業を完了するまでの時間（ミリ秒）（渡されたオプションに応じて、Nuxt アプリケーション用のファイルの構築または生成を含むことができる）
- 型: number
- デフォルト値: 60000
Features to Enable
server
テストスイート内のリクエストに応答するサーバーを起動するかどうか
- 型: boolean
- デフォルト値: true
build
別のビルドステップを実行するかどうか
- 型: boolean
- デフォルト値: true（
browserかserverが無効な場合はfalse）
browser
Nuxt test utils は内部で playwright を使用してブラウザテストを行います。このオプションを設定すると、ブラウザが起動し、その後のテストスイート内で制御できるようになります。
- 型: boolean
- デフォルト値: false
browserOptions
- 型: 以下のオプションを持つオブジェクト
- type: 起動するブラウザの種類 -
chromium、firefox、webkitのいずれかを指定 - launch: ブラウザの起動時に
playwrightに渡されるオプションのオブジェクトです。詳細はこちら
- type: 起動するブラウザの種類 -
runner
テストスイート用のランナーを指定します。現在、Vitest を推奨しています。
- 型:
'vitest' | 'jest' - デフォルト値:
'vitest'
APIs
APIs for Rendering Testing
$fetch(url)
サーバーでレンダリングされたページの HTML を取得します。
import { $fetch } from '@nuxt/test-utils'
const html = await $fetch('/')
fetch(url)
サーバーレンダリングされたページのレスポンスを取得します。
import { fetch } from '@nuxt/test-utils'
const res = await fetch('/')
const { body, headers } = res
url(path)
指定されたページの完全な URL を取得します（テストサーバーが動作しているポートを含みます）。
import { url } from '@nuxt/test-utils'
const pageUrl = url('/page')
// 'http://localhost:6840/page'
Discussion