FAQ

Vue テストに固有ではない質問については、メインの FAQ も参照してください。

Vue テスティングライブラリは公式の @vue/test-utils の代替品ですか？

簡潔に言うと、そうです。Vue テスティングライブラリ (VTL) を使用する場合、@vue/test-utils をインストールする必要はありません。

より詳細な回答：VTL は @vue/test-utils の上に構築されています。公式ライブラリは Vue コンポーネントをレンダリングするために使用され（mount を呼び出すことによって）、そのメソッドの一部を公開しています（他のメソッドは非表示にしています）。使用可能なメソッドの完全なリストは、API セクションで確認できます。

DOM テスティングライブラリをインストールする必要がありますか？

いいえ！VTL は DOM テスティングライブラリから必要なすべてをインポートし、再エクスポートします。

Vue テスティングライブラリはどのようなクエリを提供していますか？

DOM テスティングライブラリのすべてのクエリ。完全なリストについては、クエリ を参照してください。

浅いレンダリングを使用できない場合、テストでコンポーネントをどのようにモックアウトすればよいですか？

一般的に、コンポーネントのモックアウトは避けるべきです（ガイドラインのセクション を参照）。

ただし、必要な場合は、Jest の モック機能 または @vue/test-utils によって提供される stubs キーを使用できます。

import {render} from '@testing-library/vue'
import Component from './Component'

test('Can stub components', () => {
  render(Component, {
    global: {stubs: ['FontAwesomeIcon']},
  })
})

VTL の GitHub リポジトリで 動作例 を確認できます。

要素が表示された/消えたかどうかをテストするにはどうすればよいですか？

表示と非表示をテストするための使用可能なメソッドについては、ガイドの 表示と非表示 セクションを確認してください。

要素がレンダリングされなかったかどうかを確認する場合は、次のようなコードを記述することができます。

expect(queryByText('submit')).toBeNull()

// or, if using jest-dom:
import '@testing-library/jest-dom'
expect(queryByText('submit')).not.toBeInTheDocument()

Vue Router の状態がテスト間で共有されているように見えるのはなぜですか？

デフォルトでは、Vue Router は hash ルーティングモード を使用します。これは、ルートの更新を window.location に保存します。Jest などのテストランナーは、テストの呼び出し間で JSDOM 環境をリセットしないため、前のテストからのルート遷移が後続のテストにリークする可能性があります。これは、新しい Vue Router が render の呼び出しごとに作成される場合でも同様です。

この問題を回避するには、abstract モードを使用してインスタンス化されたルーターを渡します。abstract モードは、JSDOM window にルート情報を保存しないため、ルーティング情報はテスト間でリークしません。例えば

import {render} from '@testing-library/vue'
import Component from './Component.vue'
import VueRouter from 'vue-router'

test('uses abstract mode for the router', async () => {
  const router = new VueRouter({
    mode: 'abstract',
    routes: [
      // Your routes here
    ],
  })

  const renderResult = render(Component, {
    routes: router,
  })

  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
  // you need to push an initial route to the stack.
  await router.push('/')
})

ボイラープレートを削減するために、テストスイート全体で使用するカスタムレンダリング関数を作成できます。例えば

// test-utils.js

import {render} from '@testing-library/vue'
import VueRouter from 'vue-router'

export async function renderApp(component, options) {
  const router = new VueRouter({
    mode: 'abstract',
    routes: [
      // Your routes here
    ],
  })

  const renderResult = render(component, {
    routes: router,
    ...options,
  })

  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
  // you need to push an initial route to the stack.
  await router.push('/')

  return renderResult
}