外部ファイルからvueファイルにインポートしたメソッドをテストでmockする方法

jestとvue-test-utilsを使ってテストファイルを作成しています。

以下のファイルはサンプルですが、util.jsにあるhogeメソッドをindex.vueにインポートしてmethods.fugaで使用しています。

この場合、テストでhogeメソッドをmockする方法はございますか？

index
1<template>
2 <div>
3  <button class="btn" @click="fuga()">
4 </div>
5</template>
6
7<script>
8import { hoge } from '@utils/util`
9
10export default {
11 data(){
12  foo: 'bar',
13  cat: ''
14 }
15 methods: {
16  fuga(){
17  this.nya = hoge(this.foo);
18  }
19 }
20}
21
22</script>

test
1import { shallowMount, createLocalVue } from '@vue/test-utils';
2import index from '@pages/index';
3
4const localVue = createLocalVue();
5localVue.use(Vuex);
6
7describe('テスト', () => {
8 it('クリックテスト', () => {
9  const wrapper = shallowMount(index, {
10   localVue
11  });
12  wrapper.find('.btn').trigger('click');
13  expect(wrapper.vm.fuga).toHaveBeenCalled();
14  expect(wrapper.vm.cat).toBe('nya'); // hogeがそのままだと通らない
15 });
16});
17

行動規範の内容に同意します

回答1件

自己解決

test
1import { shallowMount, createLocalVue } from '@vue/test-utils';
2import index from '@pages/index';
3
4const localVue = createLocalVue();
5localVue.use(Vuex);
6
7// 以下を追加
8jest.mock('@utils/util',() => {
9  return {
10   hoge: jest.fn(() => 'nya')
11  }
12 }
13)
14//
15
16describe('テスト', () => {
17 it('クリックテスト', () => {
18  const wrapper = shallowMount(index, {
19   localVue
20  });
21  wrapper.find('.btn').trigger('click');
22  expect(wrapper.vm.fuga).toHaveBeenCalled();
23  expect(wrapper.vm.cat).toBe('nya'); // hogeがそのままだと通らない
24 });
25});