🐞

Nuxt3でのVue Test Utilsでのvmがの中身が{}(空)の件

2023/12/22に公開1

今回の事象

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で対象コンポーネントへアクセス

- 記事
https://stackoverflow.com/questions/75372595/wrapper-vm-is-empty-in-vue-test-and-defineexpose-does-not-resolve-it

  • 所感
    確かにvmがlogとして出力されますが、改修等が入るとうまく機能しなくなったり、対象コンポーネントでのテストが冗長化しそうですね。。。

②テスト対象のVueファイルsetup内でdefineExposeで対象の変数および関数を定義し、外部から読み取りできるようにする

  • 実装
テスト対象のVueファイル
<script setup lang="ts">

const data = ref<string>('初期値')

defineExpose({ data }) //対象で読み取りたいものここで指定

</script>
  • 所感
    確かにvmがlogとして出力されますが、①に比べると良い気がしますが、テストコードのみならず実コードにも改修していかないのは少しあれですね。。。

最終的な解決

色々と触ってみたところvmへの閲覧はできないが、アクセスすることはできました。。
かつ識別してテストもできたので、初めから対応がいらなかったっぽいです。
しかし勉強にはなったと思っておきます。。

Discussion