Vue unit testing: "You are running Vue in development mode."?

Question

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

Answer 1

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