I started creating unit tests for a production app using jest, @testing-library/vue, and supporting libraries. The first test I created is as follows:
import vue from "vue";
import { render } from "@testing-library/vue";
import LibBtn from "./LibBtn.vue";
test('render LibBtn', () => {
const { debug } = render(LibBtn);
debug();
});
Here is the component related to this test:
<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' },
//...
</script>
The test passed successfully but there was 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.
The project uses global imports in the 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 can I auto-import all components in ComponentName.test.js? Below 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",
},
};