javascriptvue.jsjestjsdtsvue-testing-library

Test vue3 components with vue-test-library and global components


I start to create unit tests for production app with use jest and @testing-library/vue and support libs. I make first test:

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

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

for it component:

<template>
       <!-- ... never mind -->
            <slot>
                <LibIcon
                    v-if="icon"
                    :class="iconClass"
                    :icon="icon" />
            </slot>
            <LibIcon
                v-if="caret"
                class="text-tiny ml-1"
                :icon="['far', 'chevron-down']" />
        <!-- ... never mind -->
</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' },
//... never mind
</script>

Test was passed but have one warning:

  [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 <Anonymous ref="VTU_COMPONENT" >                                                                                                                                                                              
    at <VTUROOT> component resolution via compilerOptions.isCustomElement.

Project used global imports in file 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,
        //...
    }
}

How to autoimport all components in ComponentName.test.js? This is my 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",
    },
};

Solution

  • I found a solve for my problem

    1. I reinstall @testing-library/jest-dom, @testing-library/user-event, @testing-library/vue.
    2. I added options in LibBtn.test.js.

    import vue from "vue";
    import { render, screen } from "@testing-library/vue";
    import LibBtn from "./LibBtn.vue";
    
    test('render LibBtn', () => {
        const { debug } = render(LibBtn, {
            global: {
                config: {
                    compilerOptions: {
                        isCustomElement: (tag) => tag.startsWith('Lib'),
                    },
                },
            },
        });
        screen.debug();
    });