为啥用 Vuex 测试 Vue 组件时需要 createLocalVue？

Posted 2023-02-22

【中文标题】为啥用 Vuex 测试 Vue 组件时需要 createLocalVue？

【英文标题】：Why is createLocalVue needed when testing Vue components with Vuex?为什么用 Vuex 测试 Vue 组件时需要 createLocalVue？

【发布时间】：2020-09-30 09:58:22

【问题描述】：

我正在阅读 Vue Testing Cookbook 和 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);
    );
);

【参考方案1】：

来自docs：

localVue：由createLocalVue 创建的 Vue 的本地副本，用于安装组件。在这个 Vue 副本上安装插件可以防止污染原始 Vue 副本。

在您的测试中，您可能希望在测试的 Vue 实例上进行特定更改并安装插件。使用 localVue 可确保每次测试都重置这些更改。

一个明显的优势是您不必为所有测试安装所有插件。所以你的测试会更快。

另外，当你的测试变得有点复杂时，如果你不使用localVue，你会遇到测试根据它们的顺序不规律地失败，因为之前运行的测试，即使它通过了，也修改了 Vue 实例以某种方式打破你的下一个测试。但是下一个测试在单独运行时通过。 通常意味着脱发的错误类型。

使用localVue 提供了一种大多数开发人员在运行测试时都欢迎的确定性。如果您喜欢冒险，请不要使用它。

这是建议，而不是强制。

【讨论】：

您能否详细说明什么样的测试序列会失败？我在每次测试中都创建一个新商店。

不幸的是，我不能。我在 1 年多前才遇到过这种类型的错误，当时我参与的一个更复杂的 Vue 项目。因为它迫使我们提高编码标准的标准，所以我们最近没有遇到过这种类型的错误，所以我手头没有实际的例子。

但我可以向你保证的是，这是因为我使用的是相同的 Vue 原型，一旦我开始使用 localVue，我就摆脱了这些错误。症状很容易描述：测试在单独运行时通过，但在顺序运行时失败。

我很好奇这是否特定于不会为每个测试启动新会话的特定测试工具。但无论如何我们都应该采用最佳实践，以防我们切换到新的测试工具。