Given a Vue 3 component
<template>
<input id="input" type="text" @focus="handleOnFocus($event)" />
</template>
<script setup type="ts">
const handleOnFocus = () => {
console.log('Component document.activeElement:', document.activeElement)
}
</script>
And test:
import { mount } from '@vue/test-utils'
import { expect } from 'vitest'
import AarghOmg from './AarghOmg.vue'
describe('AarghOmg', () => {
let wrapper: any
beforeEach(() => {
wrapper = mount<typeof AarghOmg>(AarghOmg, {
attachTo: document.body
})
})
it('outputs activeElement', () => {
wrapper.find('#input').trigger('focus')
console.log('Test document.body.innerHTML:', document.body.innerHTML)
expect(true).toBe(true)
})
})
console.log
Component document.activeElement: HTMLBodyElement {}
Test document.body.innerHTML: <div data-v-app=""><input id="input" type="text"></div>
I would expect for the document.activeElement
to be the input, not the body element. This works correctly in a browser, so is an issue with the wrapper and the test framework.