I'm struggling to comprehend why my straightforward test case keeps failing. As I delve into the world of testing in Vue, I've created a simple test where the element.focus() is triggered
onMount(() => /* see implementation 👇*/)Below is my component:
const myInputRef = ref<HTMLInputElement | null>(null);
onMounted(() => {
if (myInputRef.value) {
myInputRef.value.focus()
}
})
</script>
<template>
<input ref="myInputRef" name="my-input" type="text">
<label for="my-input">input:</label>
</template>
And here's my test scenario:
describe('App', () => {
it('should auto focus input element', async () => {
const wrapper = mount(App);
const inputElement = wrapper.find('input');
expect(inputElement.exists()).toBeTruthy()
await nextTick()
expect(document.activeElement).toBe(inputElement.element)
})
})
While
expect(inputElement.exists()).toBeTruthy()expect(document.activeElement).toBe(inputElement.element)AssertionError: expected <body></body> to be <input name="my-input" …(1)></input> // Object.is equality
https://i.sstatic.net/wrKTe.png
What am I misunderstanding?