-
Notifications
You must be signed in to change notification settings - Fork 113
Open
@kristiankostadinov
Description
Describe the bug
A component focuses an element in the onMounted hook and the focus is lost after the render function.
In the Codesandbox there is a TestButton component that sets the focus in onMounted. In the respective test there are two test cases - one using @testing-library/vue and one using @vue/test-utils directly. The behavior of document.activeElement differs between the two.
@testing-library/vue loses the state of document.activeElement
To Reproduce Steps to reproduce the behavior:
Expected behavior
document.activeElement should be the button that was focused in the onMounted hook
Screenshots
Related information:
@testing-library/vueversion: 8.1.0Vueversion: 3.4.15nodeversion: v20.12.0npm(oryarn) version: npm 10.5.0
Relevant code or config (if any)
TestButton.vue
<template>
<div>
<button ref="button">Test</button>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
const button = ref<HTMLButtonElement | null>(null);
onMounted(() => {
console.info(document.activeElement?.nodeName); // <- body
button.value?.focus();
console.info(document.activeElement?.nodeName); // <- button
});
</script>
import { render } from "@testing-library/vue";
import { mount } from "@vue/test-utils";
import TestButton from "./TestButton.vue";
describe("TestButton", () => {
it("test @vue/test-utils", () => {
const wrapper = mount(TestButton, { attachTo: document.body });
console.info(document.activeElement?.nodeName); // <- button
expect(document.activeElement?.nodeName).toBe("BUTTON");
wrapper.unmount();
});
it("test @testing-library/vue", () => {
const { unmount } = render(TestButton, { container: document.body });
console.info(document.activeElement?.nodeName); // <- (!) body
expect(document.activeElement?.nodeName).toBe("BUTTON");
unmount();
});
});