Vuetify Jest 测试简单 <v-data-table>

Question

我无法为只有一个 v-data-table Vuetify 组件的简单组件编写 Jest 测试。我尝试安装组件，但遇到一些错误“[Vue 警告]：渲染中的错误：“类型错误：无法读取 ---> 中未定义的属性‘宽度’”。我是 Jest 测试中的新成员，所以这个问题让我发疯...

这是我的测试文件。测试组件取自 Vuetify 文档页面...

import { mount } from '@vue/test-utils';
import vuetify from 'vuetify';
import Vue from 'vue';
import Vuex from 'vuex';
import Test from '../test';

Vue.use(vuetify);
Vue.use(Vuex);

describe('VehiclePassesList', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = mount(Test);
  });

  it('renders title', () => {
    console.log('PAGE: ', wrapper.html());
    expect(true).toBe(true);
  });
});

Answer 1

我在几个小时内偶然发现了同样的问题。一段时间后，我记得 Vuetify 2.x 的升级说明包含一个有关如何在单元测试中使用 Vuetify 的示例，我意识到我实际上并没有在测试中这样做。

https://vuetifyjs.com/en/getting-started/releases-and-migrations

如果您检查单元测试部分，您可以看到它们创建了一个新的 Vuetify 实例，然后将其传递给 mount 函数：

  beforeEach(() => {
    vuetify = new Vuetify(...)
  })

  it('should...', () => {
    const wrapper = mount(Component, {
      localVue,
      vuetify
    })
  })

我不确定这是否有帮助，但就我而言，这似乎可以解决 TypeError。

   TypeError: Cannot read property 'width' of undefined