Question

我无法为只有一个v数据表Vuetify组件的简单组件编写Jest测试。我尝试获取已安装的组件，但遇到一些错误“ [Vue警告]：渲染错误：” TypeError：无法读取--->中未定义的属性'width'。我是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函数：

str[0]+"-"+str[1]+"-"+str[2]

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

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

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

Answer 2

您还可以存根VDataTable组件：

const VDataTable = {
  props: ['items', 'loading'],
  template: '<div><slot :item="items[0]" name="item.name" /></div>'
}

shallowMount(MyComponentToTest, {
  stubs: {
    VDataTable
  }
})

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

2 个答案: