###前提・実現したいこと
Vueコンポーネント内のmethodsのユニットテストを行おうとしています。
electron-vue というボイラープレートを使用したアプリケーションを構築しています。
Karma, Chai, Mochaによって自動テストを実行しています。
###発生している問題・エラーメッセージ
自動テストを実行すると、
Target.vue ✗ methods unit test TypeError: _Target2.default.test is not a function at Context.it (webpack:///test/unit/specs/Target.spec.js:9:18 <- index.js:22935:29)
というエラーメッセージが発生します。
レンダリングと参照は問題なさそうなのですが、
test()が関数ではないと言われており、その原因が分かりません。
###該当のソースコード
テストしたいVueコンポーネント(Target.vue)とメソッド(test)
vue
1<script> 2 export default { 3 methods: { 4 test () { 5 return 'test' 6 }, 7 } 8 } 9</script>
テストコード(Target.spec.js)
vue
1import Vue from 'vue' 2import Target from '@/components/Target' 3 4describe('Upload.vue', () => { 5 it('methods unit test', () => { 6 const vm = new Vue(Target).$mount() 7 expect(vm.test()).toBe('test') 8 }) 9})
###試したこと
Vue.jsのユニットテストとして紹介されているような、
以下のサンプルは問題なくテストをパスします。
vue
1import Vue from 'vue' 2import Target from '@/components/Target' 3 4describe('Target.vue', () => { 5 it('should render correct contents', () => { 6 const vm = new Vue({ 7 el: document.createElement('div'), 8 render: h => h(Target) 9 }).$mount() 10 11 expect(vm.$el.querySelector('.title').textContent).to.contain('sample text') 12 }) 13})
指定の方法がおかしいのかと思い、以下のパターンを試しました。
vm.test()ではなくvm.methods.test()としてみるパターン
vue
1expect(vm.methods.test()).toBe('test')
vm.test()ではなくvm.default.test()としてみるパターン
vue
1expect(vm.default.test()).toBe('test')
new Vueせず直接Target.test()としてみるパターン
vue
1expect(Target.test()).toBe('test')
また、以下の記事を参考にして試行錯誤を行いました。
ユニットテスト · electron-vue
単体テスト — Vue.js
モックを使用したテスト · vue-loader
Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita
Vueコンポーネントのユニットテスト - SSSSLIDE
Vue.js の 単体テストについて、webpackなどビルドツールがない状況での環境を構築する - Qiita
vue-test-utilsでvuexモジュールのテストを書く - Qiita
Vuexの状態を包括的にテストする - Qiita
###補足情報(言語/FW/ツール等のバージョンなど)
ライブラリ等は全て最新のものを使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。