9

I understand that in your jest.setup.js code, you are supposed to set

Vue.config.productionTip = false;
Vue.config.devtools = false;

and I do. In fact, here is my jest.setup.js code. Notice the console.log('yo ho');

// test/setup.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import { config } from '@vue/test-utils';
import VueCompositionApi from '@vue/composition-api'; // <-- Make the import

Vue.use(Vuetify);
Vue.use(VueCompositionApi);
Vue.config.productionTip = false;
Vue.config.devtools = false;
console.log('yo ho');
// https://vue-test-utils.vuejs.org/
// and this came from: https://github.com/kazupon/vue-i18n/issues/323
// it mocks out the $t function to return the key so you can test that the right key is being used
config.mocks = {
  $t: (key) => 'i18n:' + key
};

So given that, I don't expect to get these warnings - ever. But I do on about 1/3 of my unit test files. Not all my unit test files, just some of them. I am really confused.

So I then added that console log statement to ensure that on the unit tests that I am getting this warning, the jest.setup.js is actually getting called. This is the output from one of my unit tests:

PASS src/components/announcement-banner.test.ts (8.255s)

  ● Console

    console.log tests/unit/jest.setup.js:12
      yo ho
    console.info node_modules/Vue/dist/vue.runtime.common.dev.js:8403
      Download the Vue Devtools extension for a better development experience:
      https://github.com/vuejs/vue-devtools
    console.info node_modules/Vue/dist/vue.runtime.common.dev.js:8412
      You are running Vue in development mode.
      Make sure to turn on production mode when deploying for production.
      See more tips at https://vuejs.org/guide/deployment.html

How in the world I am I getting the Vue warning, when I am definitely executing the jest.setup?

to make these warnings go away, I have to go to the specific test file and add the config lines directly before the createLocalVue() call.

Vue.config.productionTip = false;
Vue.config.devtools = false;
const localVue = createLocalVue();
4
  • I have same problem, pinned down one component causing this behavior. So far I've found that in my case it's lying in my store. I'm importing Vue in store main file and call Vue.use(Vuex). Store is used in various places in app, not only in components and if I add Vue.config.productionTip = false in store file, it works, console log disappears. But this is not a solution for me, store is called after jest init, and this looks quite strange, so I will keep digging. Jun 4, 2020 at 16:07
  • Oh, my. Looks like jest.mock() is messing with this. Jun 4, 2020 at 16:46
  • I got this when using setTimeout to wait for all promises to resolve in a jest unit test (which is how the flush-promises npm module works). Jul 25, 2020 at 0:22
  • How about a feedback to the provided answer? Nov 5, 2021 at 17:54

3 Answers 3

22

Finally solved. Looks like jest.mock('module') is importing clean Vue (into mock, behind the scenes) if Vue is imported in given file. I've solved this by creating global mock for Vue.

In root of your project (where node_modules directory is) create __mocks__/vue/index.ts (or .js if you are not using TypeScript) file with:

import Vue from 'vue'

Vue.config.productionTip = false
Vue.config.devtools = false

export default Vue

Should solve this annoying problem.


UPDATE 2022-07-04 VueI18n common error (related)

Using Vue.extend() in components will cause Jest to use version imported through this file when component is a child component of component mounted in the test. If you are using VueI18n and try to mount component or stub child component (that uses VueI18n) everything will go sideways with error _vm.$t is not a function

To avoid that, You will need to mock VueI18n in that particular file. For example by creating fake plugin (this is more advanced fake than just $t: (key) => key, you can use whatever you want):

const VueI18nStub = {
    install(_Vue: typeof Vue) {
        function getFormattedTranslationArgs(...args: any): string {
            return args
                .reduce((result: string[], arg: any) => {
                    result.push(typeof arg === 'object' ? JSON.stringify(arg) : arg.toString())

                    return result
                }, [])
                .join(' | ')
        }

        _Vue.prototype.$t = getFormattedTranslationArgs
        _Vue.prototype.$tc = getFormattedTranslationArgs
        _Vue.prototype.$te = () => true
    },
}

Vue.use(VueI18nStub)

VueI18n is a common example, but any plugin will need to be added in this file to work, as you can't extend mock from this file inside any test.

Whole file with VueI18n stub would look like this:

import Vue from 'vue'

Vue.config.productionTip = false
Vue.config.devtools = false

const VueI18nStub = {
    install(_Vue: typeof Vue) {
        function getFormattedTranslationArgs(...args: any): string {
            return args
                .reduce((result: string[], arg: any) => {
                    result.push(typeof arg === 'object' ? JSON.stringify(arg) : arg.toString())

                    return result
                }, [])
                .join(' | ')
        }

        _Vue.prototype.$t = getFormattedTranslationArgs
        _Vue.prototype.$tc = getFormattedTranslationArgs
        _Vue.prototype.$te = () => true
    },
}

Vue.use(VueI18nStub)

export default Vue
1
  • 1
    when testing a .js file that imported Vue I was getting the error "TypeError: Cannot set properties of undefined (setting 'productionTip')" Your answer was the solution! I now do not import or run the createLocalVue (as I don't require it for just testing the .js file)
    – Peter
    Jul 4, 2022 at 0:02
4

For those using Vitest in you vitest.config.js file:

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    onConsoleLog: function (log) {
      if (log.includes('Download the Vue Devtools extension')) {
        return false;
      }
    }
  }
});

More info:

3

After upgrading to vue 2.7, all my unit tests for components using the composition-api were failing. It turns out, now that the composition-api is directly exported in the vue module, the jest mock from the accepted answer has to be updated like this:

import Vue from 'vue';

Vue.config.productionTip = false;
Vue.config.devtools = false;

export default Vue;
// this line makes available all of the non-default exports from the vue module in jest tests
export * from 'vue';

Hope this helps anyone struggling with unit tests under vue 2.7

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.