VIcon 导致 jest 测试失败（Vue2/Vuetify3）

大佬教程收集整理的这篇文章主要介绍了VIcon 导致 jest 测试失败（Vue2/Vuetify3），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决VIcon 导致 jest 测试失败（Vue2/Vuetify3）？

开发过程中遇到VIcon 导致 jest 测试失败（Vue2/Vuetify3）的问题如何解决？下面主要结合日常开发的经验，给出你关于VIcon 导致 jest 测试失败（Vue2/Vuetify3）的解决方法建议，希望对你解决VIcon 导致 jest 测试失败（Vue2/Vuetify3）有所启发或帮助；

这是一个 Vue 2 JavaScript 应用程序：

VIcon 导致 jest 测试失败并出现此错误：

console.error node_modules/vue/dist/vue.runtime.common.dev.Js:621
  [Vue warn]: Error in render: "TypeError: CAnnot read property 'component' of undefined"
  
  found in
  
  ---> <VIcon>
         <VcheckBox>
           <Anonymous>
             <Root>

我使用 Vue cli 工具创建了这个应用程序，并使用 vue add 添加了 Vuetify 插件。我也在 vue 模板模板中使用 PUG，使用 SCSS 代替 CSS（Node-sass）。这可能是由于下面将提供的笑话设置。我按照在线设置忽略了一些文件并收集了覆盖范围。

@H_980_7@module.exports = {
  preset: '@vue/cli-plugin-unit-jest',setupfiles: ['./tests/setup.Js'],modulenameR_203_11845@apper: {
    '^@/(.*)$': '<rootDir>/src/$1',},testMatch: [
    '**/tests/unit/**/*.spec.(Js|Jsx|ts|tsX)|**/__tests__/*.(Js|Jsx|ts|tsX)','**/tests/int/**/*.spec.(Js|Jsx|ts|tsX)|**/__tests__/*.(Js|Jsx|ts|tsX)',],transform: {
    ".+\\.(CSS|styl|less|sass|sCSS|png|jpg|jpeg|mp3|ttf|woff|woff2)$": "jest-transform-stub","^.+\\.Jsx?$": "babel-jest","^.+\\.Js?$": "babel-jest"
  },snapshotserializers: ['jest-serializer-vue'],collectCoverage: true,collectCoverageFrom: [
    'src/**/*.{Js,vuE}','!src/main.Js','!src/App.vue','!src/plugins/*','!src/router/*',// tesTing this later
    '!src/store/*','!src/store/modules/*',};

jest 内部设置文件只是添加了 vuetify：

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

这是 package.Json 以查看我正在使用的版本：

{
  "name": "clIEnt2","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit --coverage --watchAll","test-ci": "vue-cli-service lint && vue-cli-service test:unit && vue-cli-service --mode development --headless","lint": "vue-cli-service lint"
  },"dependencIEs": {
    "axios": "^0.21.1","core-Js": "^3.6.5","vue": "^2.6.11","vue-notification": "^1.3.20","vue-router": "^3.2.0","vuetify": "^2.2.11","vuex": "^3.4.0"
  },"devDependencIEs": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-unit-jest": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/eslint-config-prettIEr": "^6.0.0","@vue/test-utils": "^1.0.3","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-prettIEr": "^3.1.3","eslint-plugin-vue": "^6.2.2","node-sass": "^4.12.0","prettIEr": "^1.19.1","sass": "^1.19.0","sass-loader": "^8.0.2","vue-cli-plugin-pug": "~2.0.0","vue-cli-plugin-vuetify": "~2.0.9","vue-template-compiler": "^2.6.11","vuetify-loader": "^1.3.0"
  }
}

和测试：

import TriBox from '../../src/components/UIContainers/TriBox.vue';
import { createLocalVue,mount } from '@vue/test-utils';
import Vuetify from 'vuetify';


describe('<TriBox /> Unit Tests',() => {
  let wrapper;
  const localVue = createLocalVue();
  localVue.use(Vuetify);
  beforeEach(() => {
    wrapper = mount(TriBox,{
      localVue,});
  });
  it(`renders to screen`,() => {
    expect(wrapper.exists).toBeTruthy();
  });
});

和组件：

<template lang="pug">
.box-container
  .left
    v-checkBox
  .mIDdle
    p Hello
  .right
    v-icon mdi-trash-can
</template>

<script>
export default {};
</script>

<style lang="sCSS" scoped>

</style>

我找不到与这是 Vuetify 和 Vue2 的已知错误相关的特定文档。任何人都知道如何解决这个问题？我认为这与 jest 设置文件有关，或者我如何设置测试并将 vuetify 添加到本地 vue。但任何建议都会有所帮助。

解决方法

大佬总结

以上是大佬教程为你收集整理的VIcon 导致 jest 测试失败（Vue2/Vuetify3）全部内容，希望文章能够帮你解决VIcon 导致 jest 测试失败（Vue2/Vuetify3）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。