CODEWITHSUNDEEP
vue.jsjestjs
Blaine Lafreniere
Blaine Lafreniere

Reputation: 3600

Jest unable to load module vue-cookies

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
  [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'get' of undefined"

  found in

  ---> <Anonymous>
         <Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
  TypeError: Cannot read property 'get' of undefined
      at VueComponent.mounted (/home/ubuntu/vue-testing-skel/src/components/ChatApp.vue:66:1)

The line that is causing the error:

    this.current_nickname = this.$cookies.get('nickname')

this.$cookies is provided by a module called vue-cookies

I have it installed and saved in my devDependencies, but it seems jest is unable to find it or load it.

I'm not sure what I have to do to make sure Jest is loading these modules properly.

Upvotes: 2

Views: 1207

Answers (2)

Hartley Brody
Hartley Brody

Reputation: 9118

To build off of @Imre_G 's answer, you need to specify a $cookies key inside your mount() or shallowMount() function, like so:

    wrapper = shallowMount(ComponentName, {
      localVue,
      ...
      mocks: {
        $cookies: {
          get: jest.fn().mockReturnValue(null),
          set: jest.fn(),
        }
      }
    });

Upvotes: 0

Imre_G
Imre_G

Reputation: 2535

Testing with Jest is meant to be self-contained. This means that global objects like this.$cookies are not available since they are interfacing with the cookies in your browser. The way to solve this is to mock the global functions. More info on how to do that here: https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n

Upvotes: 3

Related Questions