【Nuxt.js/Vue.js/Jest】テストコード上で.vueファイルの型情報を使う

概要

Nuxt.js/Vue.jsでJest使用時に.vueファイルの型情報を使用する方法を記載します。
※非公式

結論

• テストコードのファイルも.vue拡張子にする（vue-loaderで解釈させる）
• テストコードを<script></script>で囲う

実行環境

• Visual Studio Code - 1.62.3
  • Vetur - 0.35.0

使用ライブラリ

• nuxt - 2.15.7
• jest - 27.0.5
• vue-jest - 3.0.4

テスト対象のコンポーネント

components\Tutorial.vue

<template>
  <div>
    <h3 @click="onClick()">{{ value }}</h3>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      value: 'hoge',
    }
  },
  methods: {
    /**
     * click test
     */
    onClick() {
      const str = this.value
      console.log(str)
    },
  },
})
</script>

普通にやると

Tutorial .spec.js

import { shallowMount } from '@vue/test-utils'
import Tutorial from '@/components/Tutorial.vue'

describe('Tutorial', () => {
  test('method', () => {
    const wrapper = shallowMount(Tutorial)
    console.log = jest.fn()
    wrapper.vm.onClick()
    expect(console.log).toHaveBeenCalledWith(wrapper.vm.value)
  })
})

.vueファイルがVueインスタンス扱いされるため、コンポーネント内で定義しているメソッドがany扱いになります

普通にやると

Tutorial .spec.vue

<script lang="ts">
import { shallowMount } from '@vue/test-utils'
import Tutorial from '@/components/Tutorial.vue'

describe('Tutorial', () => {
  test('method', () => {
    const wrapper = shallowMount(Tutorial)
    console.log = jest.fn()
    wrapper.vm.onClick()
    expect(console.log).toHaveBeenCalledWith(wrapper.vm.value)
  })
})
</script>

Visual Studio Code上で拡張機能のVeturを入れておくとimportしたTutorial.vueの型を判定してくれます。
また、Jest実行時にも型チェックが走り、異なるメソッドを指定していたらエラーになります。

サンプルソース一式

github.com