您如何对全球注册的 Vue 组件进行单元测试？

Question

我有一个仓库，人们通常使用 Vue.component 作为编写组件的方式，甚至不将它们导出为 ES6 模块（这是在 SFC 出现之前）。 有什么方法可以提取 Vue.component 注册并对其进行单元测试，而无需首先对其进行重构？

像这样：

Vue.component('knife', () => {...});

我看到这不是最好的解决方案，因为我们将在该 Vue 全局实例上产生命名空间污染，并且在某些情况下，单元测试可能因此成为一个巨大的实例，但我只是想知道是否有办法做。

由于我们将对其中一些组件进行单元测试，我们可以将它们重构为 SFC，并且测试将保证它们仍然有效。

如果您只想说：“不要这样做”，请至少显示更多不这样做的问题。 :)

Answer 1

由于我们使用的是 Jest，我们可以使用设置文件将 Vue 定义为全局变量，并访问它的 API 以获取全局注册的组件：

设置文件：

import VueGlobalInstance from 'vue';
// Forcing Vue to be a global var to use it on the global components.
global.Vue = VueGlobalInstance;

// This is where we can reach those Vue components.
// Vue.options.components

所以在你的 component.js 文件上：

import '@/component.js';
import { mount } from '@vue/test-utils';

describe('Component', () => {
    let props = {
         ...
    };

    const build = () => {
        const wrapper = mount(Vue.options.components['component-name'], {
            propsData: props,
        });

        return {
            wrapper,
        };
    };

    it('renders the component', () => {
        const { wrapper } = build();

        expect(wrapper).toMatchSnapshot();
    });
});

这是一个前卫的案例，由于全局命名空间污染，您根本不应该这样做 IRL。