【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実行時にも型チェックが走り、異なるメソッドを指定していたらエラーになります。