VIcon 导致开玩笑测试失败 (Vue2/Vuetify3)

Posted 2023-02-22

【中文标题】VIcon 导致开玩笑测试失败 (Vue2/Vuetify3)

【英文标题】：VIcon causing jest test to fail (Vue2/Vuetify3)

【发布时间】：2021-05-02 15:18:15

【问题描述】：

这是一个 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 添加了插件。我还使用 PUG 作为 vue 模板模板，并使用 SCSS 而不是 css (Node-sass)。这可能是由于下面将提供的开玩笑设置。我按照在线设置忽略了一些文件并收集了覆盖范围。

module.exports = 
  preset: '@vue/cli-plugin-unit-jest',
  setupFiles: ['./tests/setup.js'],
  moduleNameMapper: 
    '^@/(.*)$': '<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/*',
  ],
;

开玩笑的内部设置文件只是添加了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 的方式有关。但任何建议都会有所帮助。

【参考方案1】：

基于 Vuetify 的Jest setup docs：

不要使用localVue.use(Vuetify)，因为您已经在 J​​est 设置文件中调用了Vue.use(Vuetify)。

与localVue 一起，将vuetify 作为Vuetify 的新实例传递给mount()：

const localVue = createLocalVue()
let wrapper

beforeEach(() => 
  wrapper = mount(TriBox, 
    localVue,
    vuetify: new Vuetify(),
  )
)