Unknown custom element Vue Jest Testing on vuetify plugin 2021 - Vue Cli 2

Question

Configuring setup.js inside jest.config.js doesn't solve the error

setup.js

import Vue from "vue";
import Vuetify from "vuetify";
Vue.config.productionTip = false;
Vue.use(Vuetify);

jest.config.js

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  setupFiles: ["./tests/unit/setup.js"],
};

Error Occuring:

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

Mohamed Raza · Accepted Answer · 2021-05-06 20:13:28Z

1

Setup testing for Vuetify

For vuetify, you will need some changes to make sure everything will work fine. First of all, create a setup.js file under the project’s tests folder with the following lines:

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.config.productionTip = false;

After that open package.json file and replace

From

"test:unit": "vue-cli-service test:unit"

To

"test:unit": "vue-cli-service test:unit --setupTestFrameworkScriptFile=./tests/setup.js"

Let’s write a simple test

import { mount } from "@vue/test-utils";
import Vuetify from "vuetify";

describe("example.vue", () => {
   const vuetify = new Vuetify();
   test("False Test", () => {
       const wrapper = mount(Login, {
           stubs: ["router-link", "router-view"],
           vuetify,
    });
    
     const h1 = wrapper.find("h1");
     expect(h1.html()).toBe("<div><p>Foo</p></div>");
  });

  test("True Test", () => {
    const wrapper = mount(Login, {
      stubs: ["router-link", "router-view"],
      vuetify,
    });
    const h1 = wrapper.find("h1");
    expect(h1.html()).toBe("<h1>Login</h1>");
  });

answered May 6, 2021 at 20:13

Mohamed Raza

1741 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Uchiha Over a year ago

You're such a lifesaver !! After hours of research, this only worked. Thank you so much. Btw, --setupTestFrameworkScriptFile is depreciated use this inside jest.config instead setupFilesAfterEnv: ['<rootDir>/src/plugins/vuetify.ts']

Collectives™ on Stack Overflow

Unknown custom element Vue Jest Testing on vuetify plugin 2021 - Vue Cli 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related