javascript - 测试 Vuetify (Vue.js) - 第二次调用 mount 抛出错误

Question

我目前在测试我的 Vue 应用程序时遇到了一个行为(特别是当包含 vuetify 时)。我将 Jest 用作测试运行器，但在使用 mocha 时遇到了相同的行为。

首先要注意的是，问题只发生在 @vue/test-utils 的挂载上，而不是 shallowMount。此外，它只会在您使用 mount 两次时发生(我猜原因是 Vue 对象的污染，但稍后会详细介绍)。

现在我的组件是 manly 只是基本 v-data-table 的包装器属性值绑定(bind)到它的项目和一些用于复选框而不是文本的自定义插槽。

现在是问题。首先，这是我测试的第一个变体的样子(这基本上是 vuetify 推荐的方式。看看 here 。因为测试本身并不重要，所以我只希望在这里为真

import Vue from 'vue';
import Vuetify from 'vuetify';
import { mount, createLocalVue, shallowMount } from '@vue/test-utils';

import  PermissionTable from '@/components/PermissionTable.vue';
import { expect } from 'chai';

const localVue = createLocalVue();

// Vue.use is not in the example but leaving it will cause the error that 
// the data table is not registered
Vue.use(Vuetify);

describe('Permissiontable.vue', () => {
  let vuetify;
  let tableItems;

  beforeEach(() => {
    tableItems = [];
    vuetify = new Vuetify();
  });


  it('will test the first thing',() => {
    const wrapper = mount(PermissionTable, {
      localVue,
      vuetify,
      propsData: {
        value: tableItems
      }
    });

    expect(true).to.be(true);
  });


  it('will test the second thing',() => {
    const wrapper = mount(PermissionTable, {
      localVue,
      vuetify,
      propsData: {
        value: tableItems
      }
    });

    expect(true).to.be(true);
  });
});

现在，正如已经在不使用 Vue.use(Vuetify) 的情况下评论的那样，我将收到组件 v-data-table 未注册的错误。有了它，我剩下以下行为

1. 测试第一件事按预期运行并成功
2. 第二件事失败了以下错误

Type Error: Cannot read property '$scopedSlots' of undefined

并在 mount(....) 处失败。为了使行为更奇怪，如果我调试并停在这一行，在调试控制台中手动运行挂载，它第一次也失败并出现相同的错误。如果我再次运行它，它就会起作用。例如，如果我执行此测试 4 次，就会发生这种情况。第一个会成功 -> 第二个会失败 -> 第三个和第四个会再次成功。

现在我确信，如果函数获得相同的输入，它们的行为方式是相同的。因此必须在第一次调用时更改安装的输入。我的猜测是 Vue 类以某种方式被污染了。因此，如果我查看 localVue 的文档这个实用程序是为了防止全局 Vue 类的污染。所以我将代码更改为

import Vue from 'vue';
import Vuetify from 'vuetify';
import { mount, createLocalVue, shallowMount } from '@vue/test-utils';

import  PermissionTable from '@/components/PermissionTable.vue';
import { expect } from 'chai';

describe('Permissiontable.vue', () => {
  let vuetify;
  let tableItems;
  let localVue;

  beforeEach(() => {
    tableItems = [];
    localVue = createLocalVue();
    vuetify = new Vuetify();
    localVue.use(vuetify);
  });


  it('will test the first thing',() => {
    const wrapper = mount(PermissionTable, {
      localVue,
      vuetify,
      propsData: {
        value: tableItems
      }
    });

    expect(true).to.be(true);
  });


  it('will test the second thing',() => {
    const wrapper = mount(PermissionTable, {
      localVue,
      vuetify,
      propsData: {
        value: tableItems
      }
    });

    expect(true).to.be(true);
  });
});

所以我为每个测试创建了一个新的 localVue 和 vuetify 实例。并让 localVue 使用 vuetify。现在这让我回到错误

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我还尝试了注入(inject) vuetify(实例化)或 Vuetify 的各种改变。使用全局 Vue.use 等。最后我总是留下这两种行为之一。

现在的解决方法似乎是将每个测试都写在一个有效的文件中，但我认为这是非常糟糕的做法，我想了解这里到底发生了什么。

我现在还为 Vuetify 和 Vue-Test-Utils 创建了 Issue，因为我无法想象这是预期的行为，并且制作了我的组件的精简版本，并将测试作为 Repo

rm-test-mount-fails-on-second-exec

重现:

1. 克隆 repo
2. npm 安装
3. npm 运行测试:单元

版本:

Vue:2.6.10
Vue-Test-Utils:1.0.0-beta.29
验证: 2.1.12

Answer 1

坏消息

事实证明这确实是 vue-test-utils 中的一个错误眼下。在我打开问题后，我发现了另一个有问题的问题与我的相似，我很确定根本原因与我的情况相同。显然，这是由于 v.beta.29

中的 vue 实用程序发生了变化

问题可以在这里找到 #1130

好消息

有一种变通方法可以让您的测试再次运行，直到此错误得到解决。您需要使用 sync: false 选项进行挂载，因此在顶部示例中的挂载看起来像

const wrapper = mount(PermissionTable, {
  localVue,
  vuetify,
  propsData: {
    value: tableItems
  },
  sync: false
});

我仍然认为这是一个严重的错误，因为无论设置如何，每次运行相同的测试时都应该以相同的方式运行。一旦有消息表明此问题已得到解决，我将立即更新此帖子。