使用Jest与Vue Testing Library时，如何自动导入全局Vue3组件？

问题场景 #

在Vue3生产应用中使用Jest、@testing-library/vue编写单元测试时，首个测试用例可正常通过，但出现LibIcon组件无法解析的警告。项目已在app.zlib.d.ts中声明全局组件，但测试环境并未识别这些全局注册。

测试用例代码 #

import vue from "vue";
import { render } from "@testing-library/vue";
import LibBtn from "./LibBtn.vue";

test('render LibBtn', () => {
    const { debug } = render(LibBtn);
    debug();
});

组件（LibBtn.vue）核心代码 #

<template>
       <!-- 其他代码省略 -->
            <slot>
                <LibIcon
                    v-if="icon"
                    :class="iconClass"
                    :icon="icon" />
            </slot>
            <LibIcon
                v-if="caret"
                class="text-tiny ml-1"
                :icon="['far', 'chevron-down']" />
        <!-- 其他代码省略 -->
</template>
<script setup>
import { computed } from 'vue';
import { useComputedVariant } from '@/composables/useTheme';

const props = defineProps({
    type: { type: String, default: 'button' },
    tag: { type: String, default: 'button' },
// 其他props省略
</script>

警告信息 #

[Vue warn]: Failed to resolve component: LibIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

at
at

全局组件声明文件（app.zlib.d.ts） #

// 其他导入省略
import LibBtn from './src/zlib/LibBtn/LibBtn.vue';
import LibIcon from './src/zlib/LibIcon/LibIcon.vue';
// 其他导入省略

declare module '@vue/runtime-core' {
    export interface GlobalComponents {
        // 其他组件省略
        LibBtn: typeof LibBtn,
        LibIcon: typeof LibIcon,
        // 其他组件省略
    }
}

Jest配置（jest.config.js） #

module.exports = {
    testEnvironment: "jsdom",
    moduleFileExtensions: ["js", "json", "vue"],
    transform: {
        "^.+\\.js$": "babel-jest",
        "^.+\\.vue$": "@vue/vue3-jest",
    },
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
    },
};

解决方案 #

方法1：单测试文件内全局注册组件 #

直接在当前测试用例中注册所需全局组件，适合临时场景：

import { createApp } from 'vue';
import { render } from "@testing-library/vue";
import LibBtn from "./LibBtn.vue";
import LibIcon from '@/zlib/LibIcon/LibIcon.vue';

// 创建测试用Vue实例并注册组件
const testApp = createApp({});
testApp.component('LibIcon', LibIcon);

test('render LibBtn', () => {
    const { debug } = render(LibBtn, {
        global: {
            plugins: [testApp]
        }
    });
    debug();
});

方法2：全局测试前置文件批量注册（推荐） #

适合存在大量全局组件的项目，避免重复注册：

1. 创建tests/setup.js文件，批量注册所有全局组件：

import { createApp } from 'vue';
import LibBtn from '@/zlib/LibBtn/LibBtn.vue';
import LibIcon from '@/zlib/LibIcon/LibIcon.vue';
// 导入其他全局组件

const testApp = createApp({});
// 批量注册全局组件
testApp.component('LibBtn', LibBtn);
testApp.component('LibIcon', LibIcon);
// 注册其他全局组件

export { testApp };

2. 修改jest.config.js，添加前置文件配置：

module.exports = {
    // 原有配置保留
    setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
};

3. 测试用例中直接使用全局插件：

import { render } from "@testing-library/vue";
import LibBtn from "./LibBtn.vue";
import { testApp } from '../tests/setup';

test('render LibBtn', () => {
    const { debug } = render(LibBtn, {
        global: {
            plugins: [testApp]
        }
    });
    debug();
});

方法3：render选项按需注册组件 #

仅在当前测试中注册所需组件：

import { render } from "@testing-library/vue";
import LibBtn from "./LibBtn.vue";
import LibIcon from '@/zlib/LibIcon/LibIcon.vue';

test('render LibBtn', () => {
    const { debug } = render(LibBtn, {
        global: {
            components: {
                LibIcon
            }
        }
    });
    debug();
});

说明 #

TypeScript全局声明文件仅提供类型提示，不会在运行时自动注册组件，因此测试环境需手动注册全局组件才能完成解析。方法2适合全局组件较多的项目，能最大程度减少重复代码。

内容的提问来源于stack exchange，提问作者Airat Ahunov