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

原文 标签 vue.js vuejs2 jestjs vue-composition-api

我使用 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,
  };
}
有没有可能以某种方式解决这个问题?
Error

最佳答案

MainMenuContent.vue可能有 sidebarControl.ts 的顶级导入, 调用 ref在组件的 setup() 之外, 所以导入 MainMenuContent.vue会触发 ref在您的测试有机会设置之前调用 localVueVueCompositionApi .
解决此问题的一种方法是将组件导入推迟到您设置之后 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)

关于vue.js - JEST @vue/composition-api + Jest 测试套件运行失败 [vue-composition-api] 在使用任何函数之前必须调用 Vue.use(VueCompositionAPI),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65275139/

相关文章:

javascript - 用路由器链接填充 vue-multiselect

typescript - 找不到名称 'describe' 。您是否需要为测试运行程序安装类型定义?

javascript - 如何使用 Jest 检查对象属性是否匹配?

vue.js - vue js 中的 process.env.BASE_URL 是什么?

javascript - 在 WebRTC 回调中更改属性时不会触发 Vue.js 更新

vue.js - 为什么这个方法不会被@keyup 事件触发?

javascript - 如何定义空多维数组

reactjs - Create-React-App:无法从 package.json 脚本触发代码覆盖率报告

vue.js - 在Vuetify中将主题颜色公​​开给CSS变量不起作用

javascript - Vue JS Option元素“选中”仅是属性,需要将其作为属性