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

我还不能发表评论。请编辑您的问题并提供组件代码。

由于错误与t有关，因此翻译中最有可能出现此问题。您将需要在测试中模拟翻译模块。

Answer 2

要在vuetify上运行vue单元测试，需要做几件事（有点随机）：

每个this注释都避免使用createLocalVue（）。
某些组件（例如自动完成）需要$vuetify.lang和$vuetify.theme才能被模拟

重写您的规范，它应该类似于：

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

Vue单元测试-无法读取未定义的属性“ t”

2 个答案: