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",
},
};
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();
});