为什么用 Jest 测试 Vue 组件时 document.activeElement 没有指向 JSDom 中的焦点元素？

Question

我正在使用 vue-test-utils 和 jest 测试 Vue.js 2 组件。该组件自动将焦点设置到特定元素。 JSDom 应该指向 document.activeElement 变量中的这个元素，但即使我在测试中使用 wrapper.find(...).element.focus() 手动设置焦点，它也只会指向 body 元素。

it('focuses the default option automatically', async () => {
  const wrapper = await mount(component);
  console.log(document.activeElement); // -> <body></body>
  // expect(document.activeElement.value).toBe('none');
});

Answer 1

当您使用 vue-test-utils 挂载组件时，它不会自动连接到 JSDom。您需要使用 mount() / shallowMount() 函数的 attachTo 选项连接它。

const wrapper = await mount(component, {
  attachTo: document.body, // ← added!
});

最终提示我的是 enzymejs 存储库中的这个问题：https://github.com/enzymejs/enzyme/issues/2337#issuecomment-586583502

此外，关于焦点，特定版本的 JSDom（v16 对我来说工作正常）存在问题，在某些情况下，tabindex 属性是必需的：https://github.com/jsdom/jsdom/issues/2586

为什么用 Jest 测试 Vue 组件时 document.activeElement 没有指向 JSDom 中的焦点元素？

Why does document.activeElement not point to the focused element in JSDom when testing a Vue component with Jest?

javascript

jsdom

vue.js

jestjs