Vue.js 如何测试Vue组件安装函数中调用的Vuex模块动作？

我有一个像这样的Vue组件

从“Vue”导入Vue；
从“vue类组件”导入组件；
从“@/store/modules/mapViewModule”导入{mapViewModule}；
@组成部分
导出默认类GeospatialMap扩展Vue{
异步装入（）：承诺{
mapViewModule.initializeMapView（此$el作为HTMLLevel）；
}
}
马普迪夫先生{
高度：700px；
宽度：1000px；
}

…我正在尝试测试是否调用

mapViewModule.initalizeMapView

函数，这是我的Vuex模块中的一个操作

我是在开玩笑，并且已经找到了其他的答案，比如：但是我没有运气

从“@vue/test-utils”导入{shallowMount，createLocalVue}；
从“Vuex”导入Vuex；
从“@/components/Geospatial.vue”导入地理空间映射；
描述（“地理空间地图-”，（）=>{
const localVue=createLocalVue（）；
localVue.use（Vuex）；
常数模={
mapViewModule：{
国家：{}，
行动：{
初始化mapview:jest.fn（）
},
名称空间：true
}
};
const store=new Vuex.store（{modules}）；
浅山（地理空间地图，{localVue，store}）；
它（“创建组件时，初始化映射视图”，async（）=>{
expect（modules.mapViewModule.actions.initializeMapView）.toHaveBeenCalled（）；
});
});

简单地说…jest.fn说它没有在控制台中调用

expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

我不确定哪里出了问题。我不是在嘲笑模块的行为吗

---

我只想测试在初始化此组件时是否调用Vuex操作。

是的，您没有正确模拟存储。我还想说，你正在以一种有点奇怪的方式使用商店，但这取决于你

我对组件做了一些更改，以便尽可能清楚地确定您的问题

<template>
  <div class="mapdiv">
    I am
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { mapViewModule } from '@/helpers/someModule' // there you put your path to the module

@Component
export default class GeospatialMap extends Vue {
  mounted (): void {
    mapViewModule.initializeMapView(this.$el as HTMLDivElement)
  }
}
</script>

<style scoped>
.mapdiv {
  height: 700px;
  width: 1000px;
}
</style>

然后在

spec

-文件中，我们必须告诉Jest使用我们的模拟文件，而不是像这样的真实文件：

import { shallowMount, Wrapper } from '@vue/test-utils'
import GeospatiaMap from '@/components/GeospatiaMap/GeospatiaMap.vue'
import { mapViewModule } from '@/helpers/someModule'

jest.mock('../../helpers/someModule.ts') // there you put your path to module you want to mock
let wrapper: Wrapper<GeospatiaMap & { [key: string]: any }>

describe('GeospatiaMap.vue', () => {
  test('initializeMapView was called', () => {
    wrapper = shallowMount(GeospatiaMap) // wrapper property is useless now but you can use it your future tests
    expect(mapViewModule.initializeMapView).toBeCalled()
  })
})

从'@vue/test-utils'导入{shallowMount，Wrapper}
从“@/components/GeospatiaMap/GeospatiaMap.vue”导入地理空间地图
从“@/helpers/someModule”导入{mapViewModule}
jest.mock（'../../helpers/someModule.ts'）//在这里，您将您的路径放置到要模拟的模块
让包装器：包装器
描述（'GeospatiaMap.vue'，（）=>{
test（'调用了initializeMapView'，（）=>{
wrapper=shallowMount（GeospatiaMap）//wrapper属性现在没有用处，但您可以在将来的测试中使用它
expect（mapViewModule.initializeMapView）.toBeCalled（）
})
})

---

就这样。希望能有所帮助。

啊，谢谢你的帮助！好吧，我要集中精力去嘲笑更多的人。很高兴这有帮助！顺便说一句，我是从Edd Yerburgh的“测试Vue.js应用程序”中学到这个窍门的。

import { shallowMount, Wrapper } from '@vue/test-utils'
import GeospatiaMap from '@/components/GeospatiaMap/GeospatiaMap.vue'
import { mapViewModule } from '@/helpers/someModule'

jest.mock('../../helpers/someModule.ts') // there you put your path to module you want to mock
let wrapper: Wrapper<GeospatiaMap & { [key: string]: any }>

describe('GeospatiaMap.vue', () => {
  test('initializeMapView was called', () => {
    wrapper = shallowMount(GeospatiaMap) // wrapper property is useless now but you can use it your future tests
    expect(mapViewModule.initializeMapView).toBeCalled()
  })
})