我目前在测试我的 Vue 应用程序时遇到了一种行为（特别是在包含 vuetify 时）。我使用 Jest 作为测试运行程序，但使用 mocha 时遇到了相同的行为。
首先要注意的是，这个问题只发生在 @vue/test-utils 的 mount 而不是 shallowMount。此外，它仅在您使用 mount 两次时才会发生（我猜原因是 Vue 对象的污染，但稍后会更多）。
现在我的组件只是一个基本的v-data-table的包装器，其属性值绑定到它的项目和一些用于复选框而不是文本的自定义插槽。
现在的问题。首先，这是我的测试的第一个变体的样子（基本上是 vuetify 推荐的方式。看看这里。由于测试本身并不重要，我只希望 true 在这里是真的
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 未注册的错误。有了它，我剩下以下行为
测试第一件事按预期运行并成功
第二件事失败了以下错误
类型错误：无法读取未定义的属性“$scopedSlots”
并在挂载（....）时失败。为了使行为更加怪异，如果我在此行进行调试并停止，请在调试控制台中手动运行挂载，它在第一次时也会失败，并出现相同的错误。如果我再次运行它，它会起作用。例如，如果我执行这个测试 4 次，就会发生这种情况。第一次成功->第二次失败->第三次和第四次再次成功。
现在我确信如果函数获得相同的输入，它们的行为方式相同。所以挂载的输入必须在第一次调用时改变。我的猜测是 Vue 类会以某种方式受到污染。因此，如果我查看localVue的文档，这个实用程序是为了防止对全局 Vue 类的污染。
四季花海
慕容3067478
相关分类