6

我正在使用带有酶+摩卡+柴的 jsdom 来测试 React 组件的行为。该组件有一个聚焦 DOM 节点的方法（使用通常的node.focus()），我想测试该节点在调用时是否真正聚焦。

要知道哪个节点被聚焦，我将document.activeElement与我期望聚焦的节点进行比较。

但是，升级到 jsdom 9.1+ 后，document.activeElement似乎总是这样HTMLBodyElement，即使在调用节点的focus()方法之后也是如此。

使用 jsdom 9.0，测试运行良好。

我读到 jsdom 9.1+包含与焦点事件相关的一些更改，但我无法理解 make 如何document.activeElement按预期运行。有什么帮助吗？

4

3 回答 3

6

可能是您缺少tabindex要关注的元素的属性吗？它必须设置为有效的整数，jsdom 才能将其解释为可聚焦的。

您可以在jsdom 源代码中看到这一点。

于 2017-02-14T19:03:06.843 回答
2

扩展@Epeli的答案：

要聚焦的元素确实必须先添加到 DOM 树中，然后才能将 document.activeElement 设置为它。

如果您正在安装一个组件并想检查该组件内部的某些内容是否获得焦点，请尝试在您的测试中添加以下内容：

test(() => {
    const wrapper = mount(<SomeComponent />)
    document.body.appendChild(wrapper.find('#FocusElement').getDOMNode())
    // the rest of your test...
})
于 2021-01-16T10:08:52.847 回答
0

它可能不起作用的一个原因是该元素尚未添加到 DOM 树中。

const input = document.createElement("input");
document.body.appendChild(input);

input.focus();
console.log(document.activeElement === input)
于 2020-12-10T15:27:18.473 回答