如何在带有 vuetify 和 vuex 的 Vuejs 项目中使用 Jest？节点模块和 Vuetify 问题

Posted 2023-02-22

【中文标题】如何在带有 vuetify 和 vuex 的 Vuejs 项目中使用 Jest？节点模块和 Vuetify 问题

【英文标题】：How to use Jest in a Vuejs project with vuetify and vuex? node modules and vuetify problems

【发布时间】：2020-11-09 23:56:07

【问题描述】：

我目前正在使用 Jest 测试一个使用 Vuex 和 Vuetify 的 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);
  )
)

尝试卸载节点模块并重新安装但没有解决。

【参考方案1】：

您已设置 localVue，但尚未将其作为 option 传递给 mount()。

应该是：

mount(Component,  localVue )

//or
shallowMount(Component,  localVue )