Jest测试函数是从Vue观察程序调用的

Question

这是我的组件的简化版本：

export default {
props: {
geoJson: {
type: Object,
default: () => ({}),
},
},
watch: {
geoJson(geoJsonObj) {
this.addGeoJson(geoJsonObj);
this.fitMap();
},
},
methods: {
/**
* Fit bounds to ALL features shown on map
* @return {void}
*/
fitMap() {
const bounds = new google.maps.LatLngBounds();
this.map.data.forEach(feature => {
feature.getGeometry().forEachLatLng(latlng => {
bounds.extend(latlng);
});
});
this.map.fitBounds(bounds);
},
/**
* Add GeoJSON to map
* @param {Object}
*/
addGeoJson(geoJsonObj) {
this.map.data.addGeoJson(geoJsonObj);
},
},
};
</script>

我想测试我的观察程序在其值更改时是否正在调用addGeoJson()和fitMap()。我想模拟这些调用，因为这些函数使用谷歌地图做一些我不想测试的事情。到目前为止，这是我的玩笑测试：

import { shallowMount } from '@vue/test-utils';
import hdnMap from '../hdnMap.vue';
let wrapper;
jest.mock('../../../../utils/gmap');
const mockGeoJSON = [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]],
},
properties: {
prop0: 'value0',
prop1: 0.0,
},
},
];
beforeEach(() => {
wrapper = shallowMount(hdnMap);
});
it('should mount without crashing', () => {
expect(wrapper.isVueInstance()).toBe(true);
});
it('should react to geoJson changes', () => {
wrapper.setData({ geoJson: mockGeoJSON });
expect(hdnMap.fitMap).toHaveBeenCalled();
expect(hdnMap.addGeoJson).toHaveBeenCalled();
});

但是Jest说我的函数永远不会被调用：

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

Answer 1

你试过这个吗？

it('should react to geoJson changes', async () => {
wrapper.setData({ geoJson: mockGeoJSON });
await wrapper.vm.$nextTick()
expect(hdnMap.fitMap).toHaveBeenCalled();
expect(hdnMap.addGeoJson).toHaveBeenCalled();
});