为什么用Vuex测试Vue组件需要createLocalVue?
Why is createLocalVue needed when testing Vue components with Vuex?
我正在通读 Vue Testing Cookbook and Vue Test Utils's docs,其中涉及使用 Vuex 测试组件。两个来源都建议使用 createLocalVue
,但我不完全理解为什么。我们已经有几个使用 Vuex 但不使用 createLocalVue
的测试,它们都有效。 那么为什么这些消息来源建议使用 createLocalVue
?
根据这些消息来源,以下测试似乎是一种不良做法。这段代码会破坏某些东西吗?它是否会导致我们不知道的不良副作用?
import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import Component from 'somewhere';
// We don't use this and yet the code seems to work
// const localVue = createLocalVue()
// localVue.use(Vuex)
describe('Foo Component', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Component, {
// localVue, <-- We don't use this
store: new Vuex.Store({
modules: {
app: {
namespaced: true,
// ... more store stuff
}
}
})
})
});
it('should contain foo', () => {
expect(wrapper.contains('.foo')).toBe(true);
});
});
来自 docs:
localVue: A local copy of Vue created by createLocalVue
to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original Vue copy.
在您的测试中,您可能希望进行特定更改并在测试的 Vue 实例上安装插件。使用 localVue
确保每次测试都重置这些更改。
一个明显的优势是您不必为所有测试安装所有插件。所以你的测试会更快。
此外,当您的测试变得有点复杂时,如果您不使用 localVue
,您将遇到测试根据它们的顺序不规律地失败,因为之前的 运行 测试,甚至尽管它通过了,但以破坏下一次测试的方式修改了 Vue 实例。但是下一个测试在 运行 隔离时通过。
通常暗示脱发的错误类型。
使用 localVue
提供了一种大多数开发人员在 运行 测试时都欢迎的确定性。如果您喜欢冒险,请不要使用它。
这是建议,不是强加。
我正在通读 Vue Testing Cookbook and Vue Test Utils's docs,其中涉及使用 Vuex 测试组件。两个来源都建议使用 createLocalVue
,但我不完全理解为什么。我们已经有几个使用 Vuex 但不使用 createLocalVue
的测试,它们都有效。 那么为什么这些消息来源建议使用 createLocalVue
?
根据这些消息来源,以下测试似乎是一种不良做法。这段代码会破坏某些东西吗?它是否会导致我们不知道的不良副作用?
import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import Component from 'somewhere';
// We don't use this and yet the code seems to work
// const localVue = createLocalVue()
// localVue.use(Vuex)
describe('Foo Component', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Component, {
// localVue, <-- We don't use this
store: new Vuex.Store({
modules: {
app: {
namespaced: true,
// ... more store stuff
}
}
})
})
});
it('should contain foo', () => {
expect(wrapper.contains('.foo')).toBe(true);
});
});
来自 docs:
localVue: A local copy of Vue created by
createLocalVue
to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original Vue copy.
在您的测试中,您可能希望进行特定更改并在测试的 Vue 实例上安装插件。使用 localVue
确保每次测试都重置这些更改。
一个明显的优势是您不必为所有测试安装所有插件。所以你的测试会更快。
此外,当您的测试变得有点复杂时,如果您不使用 localVue
,您将遇到测试根据它们的顺序不规律地失败,因为之前的 运行 测试,甚至尽管它通过了,但以破坏下一次测试的方式修改了 Vue 实例。但是下一个测试在 运行 隔离时通过。
通常暗示脱发的错误类型。
使用 localVue
提供了一种大多数开发人员在 运行 测试时都欢迎的确定性。如果您喜欢冒险,请不要使用它。
这是建议,不是强加。