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

Posted 2023-02-22

【中文标题】JEST @vue/composition-api + Jest 测试套件无法运行 [vue-composition-api] 在使用任何函数之前必须调用 Vue.use(VueCompositionAPI)

【英文标题】：JEST @vue/composition-api + Jest Test suite failed to run [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

【发布时间】：2021-03-24 06:33:37

【问题描述】：

我使用 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,
  ;

有没有办法解决这个问题？

【参考方案1】：

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

解决此问题的一种方法是将组件导入推迟到您在测试中设置 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 setup file 来使用 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)