CODEWITHSUNDEEP
vue.jstestingmockingjestjs
Mala
Mala

Reputation: 115

Jest test that functions are being called from Vue watcher

This is a simplified version of my component: 

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>

I want to test that my watcher is calling addGeoJson() and fitMap() when the its value changes. I want to mock the calls since the functions does things with Google Maps that I don't want to test. This is my jest test so far: 

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();
});

But Jest says that my functions never get called: 

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

Upvotes: 3

Views: 3727

Answers (1)

Pierre_T
Pierre_T

Reputation: 1302

Did you try this ? 

it('should react to geoJson changes', async () => {
wrapper.setData({ geoJson: mockGeoJSON });

await wrapper.vm.$nextTick()

expect(hdnMap.fitMap).toHaveBeenCalled();
expect(hdnMap.addGeoJson).toHaveBeenCalled();
});

Upvotes: 1

Related Questions