时间戳

首页 > 解决方案 > Vue单元测试-无法读取未定义的属性't'

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

问题描述

我正在使用 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。

标签： vue.jsvuetify.jsvue-test-utils

解决方案

为了在 vuetify 之上运行 vue 单元测试，需要一些（有些随机的）东西：

  1. 根据此评论，避免使用 createLocalVue() 。

  2. 一些组件（如自动完成）需要$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);
})

推荐阅读