Testing with Jest: Parse Error from InfoWindow.vue when I import gmapApi

[darlingtonamz]

import {gmapApi} from 'vue2-google-maps';`
...
export default {
  computed: {
    google: gmapApi
  },
  ...
}

I tried ignoring it in jest.config.js but my tests fail because vue2-google-maps returns null

transformIgnorePatterns: ['<rootDir>/node_modules/(?!vue2-google-maps/)']

The code works fine in Dev, but It can't be transformed in Jest.

[mnts26]

@darlingtonamz Hello , Did you resolved that ?

[mnts26]

@xkjyeah Sorry. Do you have any idea on that issue?

[baspeeters]

Try setting 'node_modules/(?!vue2-google-maps)' for transformIgnorePatterns in jest.config.js.

// file: jest.config.js

module.exports = {
  ...
  transformIgnorePatterns: [
    'node_modules/(?!vue2-google-maps)'
  ],
  ...
}

[alexvkcr]

Try setting 'node_modules/(?!vue2-google-maps)' for transformIgnorePatterns in jest.config.js.

// file: jest.config.js

module.exports = {
  ...
  transformIgnorePatterns: [
    'node_modules/(?!vue2-google-maps)'
  ],
  ...
}

I can guarantee this works :))))))

In my case I inserted it in the package.json

[BrandonMurphy]

For me, adding the transformIgnorePatterns: [ 'node_modules/(?!vue2-google-maps)' ] gets rid of the unexpected token error. However it did not solve the issue here of "cannot read property 'gmapApi' of null". I was able to solve that issue by looking at the source code of vue2-google-maps and found out that they export an install function which sets gmapApi. So by adding the line below in my beforeEach it solved the error mentioned above. install(Vue, {load: true}); What I have yet to figure out is how to get the value that is returned from gmapApi() to not be null. I will post any updates here if I make progress and I hope this helps those that are still having this issue.

[albertleao]

I've added 'node_modules/(?!vue2-google-maps)', to my transformIgnorePatterns and still receive the unexpected token error. anyone have any other ideas?

[clevyrjohn]

Hey, encountered this error in 2022, used @BrandonMurphy's solution, worked great for me. Full implementation looks like this:

// Component.spec.js
import Vue from 'vue';
import { install } from "vue2-google-maps";

describe('Component', () => {
    let wrapper;

    beforeEach(() => {
    install(Vue);

    // then the rest of the test

    });

});

[ghost]

I'm using Vue2+TS+VueTestUtil/Jest and I can't make this lib work even with the proposed solutions here.

I'm using

"vue": "^2.6.14",
"vue2-google-maps": "^0.10.7",

and I have added this lib into the transformIgnorePatterns prop in my jest.config.js

transformIgnorePatterns: [
        '<rootDir>/node_modules/?!(remeda/dist|vue2-google-maps|vee-validate/dist/rules)',
    ],

I have this setup in my component.spec.ts

// tried every way to import the lib here
// import * as VueGMap from 'vue2-google-maps';
import {install} from 'vue2-google-maps';

// this is the vue2-google-maps options used in real app - which runs fine.
const vueGMapOpt = {
    load: {
        key: process.env.VUE_APP_API_KEY_MAPS,
        libraries: 'places',
    },

    installComponents: true,
};

beforeEach(() => {
        localVue = createLocalVue();
        localVue.use(Vuex);

        // let vue use vue2-google-maps. Nothing works though. 
        // localVue.use(VueGMap, vueGMapOpt);
        // VueGMap.install(localVue, vueGMapOpt);
        // install(localVue, {load:true});

        vuetify = new Vuetify(vuetifyOptions);
        mockStore = new Vuex.Store({
            modules: {
                loader,
            },
        });
    });

And the lib will still throw the error above. The component being tested uses gmapApi for DirectionsRenderer and DirectionsService.

Any ideas how I could properly test the component with this lib?