I need help testing the event emitting functionality of a VueJs 3 input component. Below is my current code:
TextInput
<template>
<input v-model="input" />
</template>
<script>
import { watch } from '@vue/composition-api';
export default {
name: 'TextInput',
props: {
value: {
default: '',
},
},
setup (props, { emit }) {
let input = ref(props.value);
watch(input, value => {
emit('input', value);
});
return { input };
}
};
</script>
text-input.spec.js
import { shallowMount } from '@vue/test-utils';
import { TextInput } from '@/src/index';
describe('TextInput test', () => {
it('Emits input event', async () => {
const wrapper = shallowMount(TextInput);
const input = wrapper.find('input');
input.setValue('Jon');
input.trigger('keyup');
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted('input');
expect(emitted).toHaveLength(1);
expect(emitted).toEqual(['Jon']);
});
})
When running the test, I encounter the following error:
● TextInput test › Emits input event
expect(received).toHaveLength(expected)
Matcher error: received value must have a length property whose value must be a number
Received has value: undefined
52 | const triggeredEvent = wrapper.emitted('input');
53 |
> 54 | expect(triggeredEvent).toHaveLength(1);
| ^
55 | expect(triggeredEvent).toEqual(['Jon']);
56 | });
57 | });
After console logging emitted, it returns an empty object {}.