I have created a Vue component and a unit test to validate its behavior. I can use the component on my Vue app without any issues, but when I run my unit test using jest, I get the error:
error TS2339: Property 'extend' does not exist on type 'typ
eof import("</path/to/module>")'.
1 export default Vue.extend({
vButton.ts - Component under test
export default Vue.extend({
template: `
<div>
<button class="default-button" @click="click">
<span>{{ text }}</span>
</button>
</div>
`,
props: {
text: String,
action: Function
},
methods: {
click(): void {
this.$emit('action');
}
}
});
vButton.spec.ts - unit test
import { mount } from '@vue/test-utils'
import vButton from '../views/core/ts/components/vButton'
describe('vButton', () => {
describe(':props', () => {
it(':text - should render a button with the passed-in label text', () => {
const msg = 'new message';
const wrapper = mount(vButton, {
propsData: { text: msg },
});
expect(wrapper.text()).toMatch(msg);
});
});
describe('@events', () => {
it('@click - should emit an "action" event when the button is clicked', () => {
const wrapper = mount(vButton);
const button = wrapper.find('button')
button.trigger('click')
expect(wrapper.emitted().action).toBeTruthy()
})
});
});
I expect Vue.extend to work fine when running the unit test.