vue.js - VIcon causing jest test to fail (Vue2/Vuetify3)

Question

This is a Vue 2 JavaScript application:

VIcon causing jest test to fail and present this error:

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>

I created this app with the Vue cli tool and used vue add to add the plugin for Vuetify. I'm also using PUG for vue template template, and SCSS instead of css (Node-sass). This might be due to the jest setup which will be provided below. I followed an online setup for ignoring some files and collecting coverage.

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/*',
  ],
};

The jest inner setup file just adds vuetify:

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

Vue.use(Vuetify);

Here is the package.json to see what versions I'm using:

{
  "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"
  }
}

and the test:

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();
  });
});

and the component:

<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>

I can't find a specific document pertaining to this being a known bug with Vuetify and Vue2. Anyone have a clue as to how to solve this? I'm thinking it has to do with the jest setup file or how I'm setting the test up and adding vuetify to the local vue. But any suggestions would be helpful.

question from:https://stackoverflow.com/questions/65942017/vicon-causing-jest-test-to-fail-vue2-vuetify3

Answer 1

Based on Vuetify's Jest setup docs:

1. Don't use localVue.use(Vuetify) because you've already called Vue.use(Vuetify) in the Jest setup file.

2. Along with localVue, pass vuetify as a new instance of Vuetify to mount():

   const localVue = createLocalVue()
   let wrapper
   
   beforeEach(() => {
     wrapper = mount(TriBox, {
       localVue,
       vuetify: new Vuetify(),
     })
   })