Unit test error

[ImmortalDragonm]

@vue/cli: 3.0.0-beta.10 vue-cli-plugin-vuetify: 0.1.3 vuetify: 1.0.16

When i run unit test, i'v got this error message.

    console.error node_modules/vue/dist/vue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    (found in <Root>)

    console.error node_modules/vue/dist/vue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <v-slide-y-transition> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    (found in <Root>)

    console.error node_modules/vue/dist/vue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    (found in <Root>)

Step to reproduce:

vue create myapp
  cd myapp
  vue add vuetify
  npm run test:unit

[nekosaur]

Which options did you select when adding vuetify?

[ImmortalDragonm]

? Allow Vuetify to replace App.vue and HelloWorld.vue? Yes
? Use custom theme? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes

[nekosaur]

I just realized that we don't actually try to modify test setup at all currently. It should probably be an option.

[ImmortalDragonm]

I know, that test don't modify, and add option - is good. But what about warning? [Vue warn]: Unknown custom element: <v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option. How to solve them?

[nekosaur]

It depends on what test framework you're using. You might have an entry point index.js for your tests where you can do Vue.use(Vuetify). Basically you need to load the vuetify library when running your tests.

[ImmortalDragonm]

Where is no index.js in jest nor mocha+chai (options in vue create)

[eskemojoe007]

Running into a similar issue...any solution for jest? I use the cli and am running into these issues.

[eskemojoe007]

I got this working by using createLocalVue

import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
// import { mount } from '@vue/test-utils';
// eslint-disable-next-line import/no-unresolved
import HelloWorld from '@/components/HelloWorld.vue';
import Vuetify from 'vuetify';

describe('HelloWorld.vue', () => {
  let localVue;
  let wrapper;
  beforeAll(() => {
    localVue = createLocalVue();
    localVue.use(Vuetify, {});
    wrapper = mount(HelloWorld, { localVue });
  });

  it('renders props.msg when passed', () => {
    const msg = 'new message';
    wrapper.setProps({ msg });
    expect(wrapper.html()).toMatch(msg);
    expect(wrapper.props().msg).toMatch(msg);
  });

  it('render props.author when passed', () => {
    const msg = 'new message';

    wrapper.setProps({ author: msg });
    expect(wrapper.html()).toMatch(msg);
    expect(wrapper.props().author).toMatch(msg);
  });
});

Produces: C:\Users\david\Documents\GitHub\sw_web_app\frontend>npm run test:unit

> frontend@0.1.0 test:unit C:\Users\david\Documents\GitHub\sw_web_app\frontend
> vue-cli-service test:unit

 PASS  tests/unit/HelloWorld.spec.js
  HelloWorld.vue
    √ renders props.msg when passed (8ms)
    √ render props.author when passed (2ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.611s
Ran all test suites.

[arafath-mk]

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});  

[rustyx]

Create a file tests/unit/index.js:

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

Then add to jest.config.js:

  setupFiles: [ '<rootDir>/tests/unit/index.js' ],

[johnleider]

There is now a section in the documentation dedicated towards explaining how to do this https://vuetifyjs.com/getting-started/unit-testing .

If you have any additional questions, please reach out to us in our Discord community.