JEST @vue/composition-api + Jest 测试套件运行失败 [vue-composition-api] 在使用任何函数之前必须调用 Vue.use(VueCompositionAPI)

Question

我使用 Vue 2 和@vue/composition-api插件。

我创建了一个 Jest 测试，但测试失败并出现错误：

Test suite failed to run
[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
      1 | import { ref } from '@vue/composition-api';
      2 | 
    > 3 | const showSidebar = ref(false);
        |                     ^
      4 | export const breakPointSize = 1250;
      5 | export const classLink = 'SidebarSectionItemRow';
      6 | export const idBtnNavbar = 'sidebarBtnNavbar';

测试规格

Test suite failed to run
[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
      1 | import { ref } from '@vue/composition-api';
      2 | 
    > 3 | const showSidebar = ref(false);
        |                     ^
      4 | export const breakPointSize = 1250;
      5 | export const classLink = 'SidebarSectionItemRow';
      6 | export const idBtnNavbar = 'sidebarBtnNavbar';

我认为这些错误是由于ref位于setup()函数之外而引起的。 侧边栏控件.ts

import VueCompositionApi from '@vue/composition-api'
import { createLocalVue, mount } from '@vue/test-utils';
import MainMenuContent from '@/components/layouts/main/sidebar/menu/MainMenuContent.vue';
// create an extended `Vue` constructor
const localVue = createLocalVue()
        
// install plugins as normal
localVue.use(VueCompositionApi)
describe('MainMenuContent', () => {
  it('expect AdminSection ', () => {
    const wrapper = mount(MainMenuContent, {
      localVue,
    });
    ....
  });
});

有可能以某种方式解决这个问题吗？

Answer 1

MainMenuContent.vue可能有 的顶级导入sidebarControl.ts，它ref在组件的外部调用setup()，因此导入MainMenuContent.vue会ref在您的测试有机会设置 之前localVue触发调用VueCompositionApi。

\n

解决此问题的一种方法是将组件导入推迟到您localVue在测试中进行设置之后：

\n

// import MainMenuContent from \'@/components/MainMenuContent.vue\' // \xe2\x9d\x8c DON\'T DO THIS\nimport { mount, createLocalVue } from \'@vue/test-utils\'\nimport VueCompositionApi from \'@vue/composition-api\'\n\ndescribe(\'MainMenuContent\', () => {\n  it(\'expect AdminSection\', () => {\n    const localVue = createLocalVue()\n    localVue.use(VueCompositionApi)\n\n    const MainMenuContent = require(\'@/components/MainMenuContent.vue\').default // \xe2\x9c\x85\n    const wrapper = mount(MainMenuContent, { localVue })\n  })\n})\n

\n

或者，您可以使用 Jest安装文件来初始化您的测试环境VueCompositionApi：

\n

// jest.config.js\nmodule.exports = {\n  setupFiles: [\'<rootDir>/tests/jest-setup.js\']\n}\n\n// jest-setup.js\nimport Vue from \'vue\'\nimport VueCompositionApi from \'@vue/composition-api\'\n\nVue.use(VueCompositionApi)\n

\n