Vuetify-module: Nuxt vuetify module + Jest

[robsontenorio]

Module version
2.0.0-alpha.4

Describe the bug
Previously when using vuetify as a "plugin" into Nuxt we had a jest.config.js like this

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/models/**/*.js'
  ],
  setupFiles: [
   '<rootDir>/plugins/vuetify',  // <------ HERE
    '<rootDir>/plugins/numerals',
    '<rootDir>/plugins/moment'
  ]
}

Where should i "bootstrap" vuetify when running tests using this vuetify-module package?

The yarn test gives me

 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provi
de the "name" option.

I have tried to switch from <rootDir>/plugins/vuetify to <rootDir>/vuetify.config.js , but no luck.

Additional context

References to vuetify on nuxt.config.js

buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify',
    '@nuxtjs/dotenv'
  ],

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    frameworkOptions: './vuetify.config.js'
  },

vuetify.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  theme: {

    themes: {
      light: {
        primary: colors.blue.darken4,
        accent: colors.blueGrey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent1
      }
    }
  }
}

package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest --colors"
  },
"dependencies": {
    "@nuxtjs/axios": "^5.9.3",
    "lodash": "^4.17.15",
    "numeral": "^2.0.6",
    "nuxt": "^2.11.0",
    "vue-moment": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/vuetify": "2.0.0-alpha.4",
    "@vue/test-utils": "^1.0.0-beta.30",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-nuxt": "^0.5.0",
    "jest": "^25.1.0",
    "jest-cli": "^25.1.0",
    "vue-jest": "^3.0.4"
  }

[caroguerrerosilvera]

I had the same issue, you can try that, it's working for me

Vue.use(Vuetify)  
const localVue = createLocalVue()  
localVue.use(Vuetify)

[robsontenorio]

@caroguerrerosilvera thanks for the tip. But in this case I must repeat the vuetify bootstrap block on every single test. Am I wrong?

With plugin strategy (different from modules) it get job done , by just pointing it on jest setup file.

[t1mwillis]

@robsontenorio we faced this as well and I set up a jestSetup.js file

in test/jestSetup.js

// See here: https://github.com/vuetifyjs/vuetify/issues/4964#issuecomment-500574050
// Gets rid of the `[Vuetify] Multiple instances of Vue detected` error.
// TODO: Vue + Vuetify 3, fix this.
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

in jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/test/jestSetup.js']
}

[kevinmarrec]

@t1mwillis is right, you need to bootstrap Vuetify to independently test components.
The plugin you had was bootstraping it. The module does it behind the scenes when nuxt runs. In test environment you may want to do individual testing on your components, which means it doesn't go through a Nuxt build and therefore the modules aren't loaded.

[robsontenorio]

@t1mwillis @kevinmarrec thanks for tips!

[frontsujdev]

@robsontenorio we faced this as well and I set up a jestSetup.js file

in test/jestSetup.js

// See here: https://github.com/vuetifyjs/vuetify/issues/4964#issuecomment-500574050
// Gets rid of the `[Vuetify] Multiple instances of Vue detected` error.
// TODO: Vue + Vuetify 3, fix this.
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

in jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/test/jestSetup.js']
}

This helps me and really a good solultion