🐞
Nuxt3でのVue Test Utilsでのvmがの中身が{}(空)の件
今回の事象
Nuxt3でVitestを導入し、テストをやろうとした際に下記のようにsetup構文のリアクティブなデータへvmからアクセスするために一度logに出してみようとしたところvmが{}と空でした。
その際に調べたことなど解消方法を記載しておきます。
テスト対象のVueファイル
<script setup lang="ts">
const data = ref<string>('初期値')
</script>
テストファイル
import { mount } from '@vue/test-utils'
import {テスト対象のVueファイル} from 'テスト対象のVueファイル'
const wrapper = mount(テスト対象のVueファイル)
console.log(wrapper.vm) // output: {}
調査
どうやら調査したところ、setup
構文で定義されたものは内部的に閉じられている処理のため外部公開していないためvmが空となる模様そのため、解決策としては2点あった
①親コンポーネントをmountしてからfindComponetで対象コンポーネントへアクセス
- 記事
- 所感
確かにvmがlogとして出力されますが、改修等が入るとうまく機能しなくなったり、対象コンポーネントでのテストが冗長化しそうですね。。。
②テスト対象のVueファイルsetup内でdefineExposeで対象の変数および関数を定義し、外部から読み取りできるようにする
- 実装
テスト対象のVueファイル
<script setup lang="ts">
const data = ref<string>('初期値')
defineExpose({ data }) //対象で読み取りたいものここで指定
</script>
- 所感
確かにvmがlogとして出力されますが、①に比べると良い気がしますが、テストコードのみならず実コードにも改修していかないのは少しあれですね。。。
最終的な解決
色々と触ってみたところvmへの閲覧はできないが、アクセスすることはできました。。
かつ識別してテストもできたので、初めから対応がいらなかったっぽいです。
しかし勉強にはなったと思っておきます。。
Discussion
記事閲覧、コメントありがとうございます!