Vue.js で methods のユニットテストを行いたい

Question

###前提・実現したいこと
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)

<script>
  export default {
    methods: {
      test () {
        return 'test'
      },
    }
  }
</script>

テストコード(Target.spec.js)

import Vue from 'vue'
import Target from '@/components/Target'

describe('Upload.vue', () => {
  it('methods unit test', () => {
    const vm = new Vue(Target).$mount()
    expect(vm.test()).toBe('test')
  })
})

###試したこと

Vue.jsのユニットテストとして紹介されているような、
以下のサンプルは問題なくテストをパスします。

import Vue from 'vue'
import Target from '@/components/Target'

describe('Target.vue', () => {
  it('should render correct contents', () => {
    const vm = new Vue({
      el: document.createElement('div'),
      render: h => h(Target)
    }).$mount()

    expect(vm.$el.querySelector('.title').textContent).to.contain('sample text')
  })
})

指定の方法がおかしいのかと思い、以下のパターンを試しました。

vm.test()ではなくvm.methods.test()としてみるパターン

expect(vm.methods.test()).toBe('test')

vm.test()ではなくvm.default.test()としてみるパターン

expect(vm.default.test()).toBe('test')

new Vueせず直接Target.test()としてみるパターン

expect(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/ツール等のバージョンなど)
ライブラリ等は全て最新のものを使用しています。

Answer 1

以下の点に留意することで無事にテストが通りました。

vm.methods.test()でもなくvm.default.test()でもなく
vm.test()を指定するのが正解でした。

toBe()という関数は対応しておらず、
equals()という関数を使用する必要がありました。

結果的に以下のコードでテストを通りました。

import Vue from 'vue'
import Target from '@/components/Target'

describe('Upload.vue', () => {
  it('methods unit test', () => {
    const vm = new Vue(Target).$mount()
    expect(vm.test()).equals('test')
  })
})

Answer 2

    const vm = new Vue(Target).$mount()

ではなくサンプルの通り

    const vm = new Vue({
      el: document.createElement('div'),
      render: h => h(Target)
    }).$mount()

とすればいいのではないでしょうか。

Comments

[1ntegrale9]

回答ありがとうございます。
そのように変更したところ、

expect(vm.test()).toBe('test')

という指定で

Target.vue
✗ methods unit test
TypeError: vm.test is not a function
at Context.it (webpack:///test/unit/specs/Target.spec.js:11:14 <- index.js:22937:15)

というエラーメッセージとなりました。

expect(vm.default.test()).toBe('test')

という指定の場合、

Upload.vue
✗ methods unit test
TypeError: Cannot read property 'test' of undefined
at Context.it (webpack:///test/unit/specs/Upload.spec.js:11:22 <- index.js:22937:22)

というようにundefinedとなるので、
レンダリング自体はそちらの方法でも、元の方法でも問題ないようです。

[karamarimo]

vm.default とはなんでしょうか？
https://vuejs.org/v2/api/#methods
「Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance」とあるので、method は vue instance の直接のプロパティとして呼び出せるはずです。

Target のインポートは正しく出来ていますでしょうか？

[1ntegrale9]

vm.default は、export default の仕様を完全に理解していないために試したもので、
間違った指定であり、vm.test() の指定が正しいことを示すものです。

「試したこと」に示してあるサンプルのテストをパスすることから、
Target のインポートは正しくできていると思われます。

[karamarimo]

質問文にある Target.vue の script は } が1つ足りないですが、それは原因ではないですか？

[karamarimo]

やっぱり私の回答のやり方では無理ですね(vm が Target のインスタンスではないので)。すみません。

[1ntegrale9]

失礼しました、質問用に色々削った際に余計に削っていました。（修正しました）
元々は存在し、ESLintもエラーを出していないので、それは原因ではないです。

ありがとうございます、他にも色々と模索してみます。