JEST @vue/复合-api+ Jest测试套件运行失败[vue-组合-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.spec.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,
    });
    ....
  });
});

我认为这些错误是由ref在setup()函数之外造成的。sidebarControl.ts

import { ref } from '@vue/composition-api';

const showSidebar = ref(false);

export function useControlSidebar() {
  const toggleSidebar = () => {
    showSidebar.value = !showSidebar.value;
  };
  return {
    showSidebar,
    toggleSidebar,
  };
}

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

​

​

Answer 1

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

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

// import MainMenuContent from '@/components/MainMenuContent.vue' // ❌ DON'T DO THIS
import { mount, createLocalVue } from '@vue/test-utils'
import VueCompositionApi from '@vue/composition-api'

describe('MainMenuContent', () => {
  it('expect AdminSection', () => {
    const localVue = createLocalVue()
    localVue.use(VueCompositionApi)

    const MainMenuContent = require('@/components/MainMenuContent.vue').default // ✅
    const wrapper = mount(MainMenuContent, { localVue })
  })
})

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

// jest.config.js
module.exports = {
  setupFiles: ['<rootDir>/tests/jest-setup.js']
}

// jest-setup.js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)