Vuejs 프로젝트에서 Jest를 vuetify 및 vuex? 노드 모듈과 함께 사용하고 문제를 vuetify하는 방법

Vuejs 프로젝트에서 Jest를 vuetify 및 vuex? 노드 모듈과 함께 사용하고 문제를 vuetify하는 방법

나는 현재 그 안에 Vuex와 Vuetify를 사용하는 Jest와 함께 Vue 프로젝트를 테스트하고 있어.어떤 구성 요소에서 어떤 것을 테스트할 때, 그것은 나에게 다음과 같은 많은 오류를 준다.

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'dispatch' of undefined"

found in

---> <DashboardSlots>
       <StatusDashboard>
         <Root>


console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
    TypeError: Cannot read property 'dispatch' of undefined   
        at VueComponent.mappedAction (D:\Users\ftg\git\DVBIP_GATEWAY_9\usr\nonius\webadmin\node_modules\vuex\dist\vuex.common.js:1052:34)
        at VueComponent.created (D:\Users\ftg\git\DVBIP_GATEWAY_9\usr\nonius\webadmin\src\components\DashboardSlots.vue:197:1)


console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
        [Vue warn]: Unknown custom element: <v-card> - did you register the component correctly? For recursive components, make 
    sure to provide the "name" option.
        
        found in
        
        ---> <DashboardSlots>
               <StatusDashboard>
                 <Root>

그리고 이것들의 훨씬 더!나는 왜 이런 일이 일어나는지 모르겠다.

이것은 내 jest.config.js 파일이다.

module.exports = {
  verbose: true,
  roots: ["<rootDir>/src/", "<rootDir>/test/"],
  moduleFileExtensions: ['js', 'vue'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest",
  },
  snapshotSerializers: [
    "<rootDir>/node_modules/jest-serializer-vue"
  ]
}

내 babel.config.js 파일:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

그리고 이건 간단한 시험이야.

import Component from '@/components/StatusDashboard.vue';
import { mount , createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Vuetify from 'vuetify';
import Actions from '@/vuex/actions.js'

const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Vuetify, {});

localVue.use(Vuex)

describe('Component test', () => {

  it('check test', () => {
    const wrapper = mount(Component)
    const test = wrapper.vm.items
    console.log(test);
  })
})

노드 모듈을 제거하고 다시 설치했지만 해결되지 않았다.

설정하셨습니다.localVue에 전달하지 않으셨습니다.mount()옵션으로

다음과 같아야 한다.

mount(Component, { localVue })

//or
shallowMount(Component, { localVue })

참조URL: https://stackoverflow.com/questions/63000345/how-to-use-jest-in-a-vuejs-project-with-vuetify-and-vuex-node-modules-and-vueti