Vue 单元测试：“您正在开发模式下运行 Vue。”？

Question

我知道在您的 jest.setup.js 代码中，您应该设置

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

我愿意。事实上，这里是我的 jest.setup.js 代码。注意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
};

因此，我不希望收到这些警告 - 永远。但是我对大约 1/3 的单元测试文件进行了处理。不是我所有的单元测试文件，只是其中一些。我真的很困惑。

然后我添加了该控制台日志语句，以确保在收到此警告的单元测试中，实际上调用了 jest.setup.js。这是我的一个单元测试的输出：

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

当我确实在执行 jest.setup 时，我到底是如何收到 Vue 警告的？

要消除这些警告，我必须转到特定的测试文件并直接在 createLocalVue() 调用之前添加配置行。

Vue.config.productionTip = false;
Vue.config.devtools = false;
const localVue = createLocalVue();

Answer 1

终于解决了。如果在给定文件中导入了 Vue，则看起来 jest.mock('module') 正在导入干净的 Vue（进入模拟，在幕后）。我通过为 Vue 创建全局模拟解决了这个问题。

在项目的根目录（node_modules 目录所在的位置）创建 __mocks__/vue/index.ts（或 .js，如果您不使用 TypeScript）文件：

import Vue from 'vue'

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

export default Vue

应该可以解决这个烦人的问题。