開発環境
- @vue/cli-service@4.5.15
- @vue/test-utils@1.3.0
- @vue/vue2-jest@27.0.0
- vue-jest@3.0.7
- jest@27.5.1
発生条件
createdフックなどで初期化処理などを行っていて、テスト側で関数をモック化する際に警告が出る。
<template>
<div><div>
</template>
<script>
export default {
created() {
this.setRoutetitle()
},
methods: {
setRoutetitle() {
// 処理
}
}
}
</script>// describe, moduleインポート記述は省略
it('初期表示', () => {
const mockFunction = jest.fn();
const wrapper = mount(Component, {
methods: {
setRoutetitle: mockFunction
}
})
})警告の内容
[vue-test-utils]: overwriting methods via the methods property is deprecated and will be removed in the next major version. There is no clear migration path for the methods property - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.Vue Test Utilsでのコンポーネントでは、メソッドの上書きは非奨励であり、Vue3に対応するVue Test Utilsでは削除される予定です。とのこと。
公式ドキュメントでもメソッドの置き換えに使用するsetMethods()に関して以下のように警告があります。
setMethods は非推奨となり、将来のリリースで削除される予定です。
setMethods を置き換える明確な方法はありません。それは、置き換え前の使われ方に非常に依存しているためです。 setMethods は実装の詳細に依存する不安定なテストに簡単につながるため、お勧めしません。それらテストを見直すことをお勧めします。複雑なメソッドをスタブするには、コンポーネントからメソッドを抽出し、単独でテストします。 メソッドが呼び出されたことをアサートするには、テストランナーを使用してそれを探ります。
とはいっても、Vue2で開発を行っている場合はライフサイクル(createdやmounted)でメソッドを実行する必要があるため、毎回この警告が出現するのは効率的ではないです。
ちなみに、警告は出ますがテストは正しければパスします。
解決策
Vue Test Utilsには、非奨励の警告を表示するかどうかを制御できるようです。
対象のテストファイルで下記のように記述すれば、警告は表示されなくなります。
import { config } from '@vue/test-utils'
config.showDeprecationWarnings = false私のプロジェクトでも、上記をテストファイルに記述して警告が消えました。
