我使用 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,
};
}
有没有可能以某种方式解决这个问题?最佳答案
MainMenuContent.vue
可能有 sidebarControl.ts
的顶级导入, 调用 ref
在组件的 setup()
之外, 所以导入 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)
关于vue.js - JEST @vue/composition-api + Jest 测试套件运行失败 [vue-composition-api] 在使用任何函数之前必须调用 Vue.use(VueCompositionAPI),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65275139/