Vue unit tests - cannot read property 't' of undefined

Question

I'm using jest to run vue unit tests to check the output of individual components. The component uses vuetify.

I create an instance of vue to mount the component:

import myComponent from './MyComponent.vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';

describe('Component', () => {
    let wrapper;

    const router = new VueRouter({
        base: '/ui/',
        routes: [
            {
                name: 'myRoute',
                path: '/route-to-my-component',
                component: myComponent
            },
        ]
    });

    beforeEach(() => {
        const localVue = createLocalVue();
        localVue.use(VueRouter);
        localVue.use(Vuetify);

        wrapper = mount(myComponent, {
            localVue: localVue,
            router
        });
    });



    it('contains a container', () => {
      expect(wrapper.contains('v-container')).toBe(true);
    })
});

I expect this test to pass, but instead I'm getting TypeError: Cannot read property 't' of undefined.

For reference, I was following https://fernandobasso.github.io/javascript/unit-testing-vue-vuetify-with-jest-and-vue-test-utils.html.

I can't post a comment yet. Please edit your question and provide a code of the component. Since the error is related to t, this is most likely issue with translation. You will need to mock the translation module in your test. — Metalmi
– Metalmi, Commented Aug 30, 2019 at 19:44

exhuma · Accepted Answer · 2021-04-18 08:45:11Z

7

A couple of (somewhat random) things are needed in order to run vue unit test on top of vuetify:

Avoid using createLocalVue(), per this comment.
Some components (like Autocomplete) need $vuetify.lang and $vuetify.theme to be mocked

Your spec should look like:

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

Vue.use(Vuetify);

it('contains a container', () => {
  const wrapper = mount(FreeAutocomplete, {
    created() {
      this.$vuetify.lang = {
        t: () => {},
      };
      this.$vuetify.theme = { dark: false };
    }
  });

  expect(wrapper.contains('v-container')).toBe(true);
})

edited Apr 18, 2021 at 8:45

exhuma

22.1k16 gold badges97 silver badges139 bronze badges

answered Dec 4, 2019 at 19:53

golfadas

5,5513 gold badges34 silver badges39 bronze badges

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

1 Comment

paddotk Over a year ago

It can't find the 'this' scope when I do this.

Collectives™ on Stack Overflow

Vue unit tests - cannot read property 't' of undefined

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