Nuxt3 のテスト環境調査

Nuxt3 向けのテスト環境構築周りのメモとか

Vue テスト

まずは vue 公式のテストを読んで見る
https://ja.vuejs.org/guide/scaling-up/testing.html#testing

■ Composable

□ ライブラリ

• vitest(★推奨)
  • vite の設定、変換パイプラインを直接使用できるため、最小限の労力で導入できる
• peeky
  • GUI ベースのテストランナー
• jest
  • vite-jest を使って動作させることができる
  • 既存のプロジェクトで jest が用意されていて、Vite ベースのプロジェクトに移行する場合のみ使用を推奨

□ テスト方法

composable のテストは2つのカテゴリに分割して考える必要がある。

1. ホストコンポーネントのインスタンスに依存しない composable

• リアクティビティAPI(refなど)のみを使用する

通常の関数と同様に composable を直接呼び出してテストすることができる。

// counter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  return {
    count,
    increment
  }
}

// counter.test.js
import { useCounter } from './counter.js'

test('useCounter', () => {
  const { count, increment } = useCounter()
  expect(count.value).toBe(0)

  increment()
  expect(count.value).toBe(1)
})

2. ホストコンポーネントのインスタンスに依存するコンポーザブル

• ライフライフサイクルフック(onMountedなど)を使用している
• Provide / Inject を使用している

ホストコンポーネントがないと onMounted などのライフサイクルフックが実行されず、 Provide しないと Inject できないため createApp で ホストコンポーネントを作成し composable をラップする必要がある。

// test-utils.js
import { createApp } from 'vue'

export function withSetup(composable) {
  let result
  const app = createApp({
    setup() {
      result = composable()
      // template の警告を抑えます
      return () => {}
    }
  })
  app.mount(document.createElement('div'))
  // provide / unmount のテストのため
  // result と app インスタンスを返却します
  return [result, app]
}

import { withSetup } from './test-utils'
import { useFoo } from './foo'

test('useFoo', () => {
  const [result, app] = withSetup(() => useFoo(123))
  // injection のテストのため provide をモック
  app.provide(...)
  // アサーションを実行
  expect(result.foo.value).toBe(1)
  // 必要に応じて onUnmounted フックを実行します
  app.unmount()
})

■ コンポーネントテスト

Vue コンポーネントは専用のテストファイルを持つことを推奨。

□ ライブラリ

テストランナー

• Vitest
  • Node ベースのランナー
  • 高速にテストできる
• Cypress Component Testing
  • ブラウザベースのランナー
  • スタイルやネイティブDOMイベント、クッキーなど Node ベースのランナーで補足できない問題をキャッチできる
  • Nodeベースのランナーに比べて遅い

https://vitest.dev/guide/comparisons.html#cypress
Vitest と Cypress Component Testing はどっちかだけを使うものではなく適材適所で使い分ける

マウントライブラリ

• @vue/test-util (★推奨)
• @testing-library/vue
• Nightwatch

元々@testing-library/vue を推奨していたが、現在 suspense の不具合があり @vue/test-util を使うことを推奨している。

■ E2E

• Cypress(★推奨)
• Playwright
• Nightwatch v2

Playwright は experimental だが、上記ライブラリはすべて vue のコンポーネントテストに対応しているため、結合テストまでカバー可能

Nuxt テスト調査

Nuxt の場合はテスト時に Nuxt のランタイム環境が必要になるため、Nuxt用のライブラリを使用する必要がある。
またオートインポートの設定なども必要になる。

ライブラリ

• @nuxt/test-utils
  E2E用のライブラリ。 まだ α版 のためAPIが変更になる可能性がある。

• nuxt-vitest
  vitest のテスト環境にNuxtランタイム環境を提供してくれるライブラリ。
  こちらもまだ α 版。
  vitestとマウントライブラリと組み合わせることでコンポーネントテストができそう。

参考

https://tech.andpad.co.jp/entry/2023/03/16/100000