vue.js - Vue 单元测试 - 无法读取未定义的属性 't'

Question

我正在使用 jest 运行 vue 单元测试来检查各个组件的输出。该组件使用 vuetify。

我创建了一个 vue 实例来挂载组件:

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

我希望这个测试能够通过，但我得到的是 TypeError: Cannot read property 't' of undefined .

作为引用，我关注了 https://fernandobasso.github.io/javascript/unit-testing-vue-vuetify-with-jest-and-vue-test-utils.html .

Answer 1

为了在 vuetify 之上运行 vue 单元测试，需要一些(有点随机的)东西:

避免使用 createLocalVue()，根据 this评论。

一些组件(如自动完成)需要 $vuetify.lang和 $vuetify.theme被 mock

您的规范应如下所示:

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