Vue Test Utilsとは？Vue 3 Component Testing

ページ内ナビ

概要

Vue Test Utils 2.5.1はVue 3向けの公式component testing utilityです。componentをtest環境へmountし、render結果、props、emitted event、子component、pluginやglobal設定を検証できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

mountでcomponentをrenderしてwrapper経由で検証する

Vue componentをmountし、wrapper APIからDOM、attributes、text、props、emitted eventなどを確認できます。

出典：[1][2]

shallowMountやglobal設定でtest対象の境界を調整する

子componentをstub化したいunit testや、plugin・provide・global componentを含めたいtestでmount strategyを調整できます。

出典：[1]

向いている用途

Vue 3 componentのregression testやinteraction testに向く

form、dialog、list、component libraryなどで、props入力とrender結果、user interaction後のeventやstateをcomponent単位で確認したいprojectに適します。

出典：[1]

導入前の確認

2.5.1はVue 3.xとcompiler/server-renderer 3.xをpeerとして要求する

package metadataはVue 3.x、@vue/compiler-dom 3.x、@vue/server-renderer 3.xをpeer dependencyとして定義しています。test runnerとは別にVue packageの整合性も確認してください。

出典：[2]

2.5.1はgeneric SFCのfindComponent型とbuild間config共有を修正する

2.5.1ではgeneric SFCに対するfindComponentの型修正と、複数build間でconfigを共有する修正が含まれます。TypeScript-heavyなtest suiteでは型checkも回帰確認対象です。

出典：[3]

参考にした公式資料

[1]Vue Test Utils v2.5.1 README(2026-10-05)
[2]@vue/test-utils 2.5.1 package metadata(2026-10-05)
[3]Vue Test Utils v2.5.1 release(2026-10-05)
[4]Vue Test Utils MIT license(2026-10-05)

編集部からの補足

Vue Test Utils 2.5.1はVue 3.xに加え、@vue/compiler-dom 3.xと@vue/server-renderer 3.xをpeer dependencyとして要求します。Vue本体と同じminor/patchへ揃えると依存関係を確認しやすくなります。

3ステップで試す

1
Vue Test Utils 2.5.1とVue 3.5.43を固定して導入する
一時npm projectへVue Test Utilsと必要なVue peer packagesを同じreleaseへ揃えて導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/vue-test-utils.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-dev --save-exact @vue/test-utils@2.5.1 vue@3.5.43 @vue/compiler-dom@3.5.43 @vue/server-renderer@3.5.43
2
package versionを確認する
Vue Test UtilsとVue本体が想定versionであることを確認します。
test "$(node -e "const fs=require('fs');const v=p=>JSON.parse(fs.readFileSync(p)).version;console.log(v('node_modules/@vue/test-utils/package.json')+'/'+v('node_modules/vue/package.json'))")" = '2.5.1/3.5.43'
3
主要testing APIのexportを確認する
test runnerを起動せず、代表的なmount/config APIを確認します。
test "$(node -e "const V=require('@vue/test-utils');console.log(['mount','shallowMount','config'].every(k=>k in V))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

1,160 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 13
Open PR: 9

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 1,160
Forks: 294
Watchers: 20
Open Issues: 24
Contributors: 192
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/01