JEST @vue/composition-api + Jest 테스트 스위트를 실행하지 못했습니다.[ vue - composition - api ]는 Vue . use ( Vue Composition )를 호출해야 합니다.API) 사용 전

JEST @vue/composition-api + Jest 테스트 스위트를 실행하지 못했습니다.[ vue - composition - api ]는 Vue . use ( 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()기능.사이드바 Control.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()Import(가져오기)MainMenuContent.vue를 트리거합니다.ref테스트를 셋업할 기회가 생기기 전에 전화한다.localVue와 함께VueCompositionApi.

이 문제를 해결하는 한 가지 방법은 설정이 완료될 때까지 컴포넌트 Import를 연기하는 것입니다.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)

언급URL : https://stackoverflow.com/questions/65275139/jest-vue-composition-api-jest-test-suite-failed-to-run-vue-composition-api