Currently, I am in the process of writing unit tests for my project using Jest. The project itself is built on Vue, Vuetify (1.5), TypeScript, and vue-property-decorator.
One particular area of focus for me has been creating a basic wrapper for the <v-btn> component. Here's how the wrapper code looks:
<template>
<v-btn
:round="!square"
v-on="$listeners"
>
<slot />
</v-btn>
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';
import { VBtn } from 'vuetify/lib';
@Component({
components: {
VBtn,
},
})
export default class Btn extends Vue {
@Prop({ default: false, type: Boolean }) private square!: boolean;
}
</script>
To test this component, I have written a simple test case:
import { mount } from '@vue/test-utils'
import Vue from 'vue';
import Btn from './Btn.vue';
describe('Btn', () => {
it('should render button', () => {
const wrapper = mount(Btn, {
propsData: {
onClick: () => {}
}
});
console.log((Vue as any).options.components.VBtn)
console.log('=======================');
console.log(wrapper.html());
console.log('=======================');
});
});
However, during the test execution, an error is encountered:
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Btn>
Despite knowing that the component is registered and works outside of the test environment, the error persists. Furthermore, a console log statement within the test confirms the global registration of the component (
console.log((Vue as any).options.components.VBtn)I've included snippets from my jest configuration file jest.config.js and the setup.ts file below:
module.exports = {
...
}
// setup.ts
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.config.productionTip = false;
Vue.use(Vuetify);
Attempting to move code from setup.ts into the test scenario did not yield any change in behavior. I suspect there may be an issue related to 'vue-property-decorator', but given that the entire project relies on it, I'm hesitant to make alterations. Could someone lend a hand or offer guidance on rectifying this issue, possibly linked to the Jest transform configuration?