我正在简单的 Jasmine 测试中设置元素的焦点
var node = React.findDOMNode(component.refs.input);
node.focus();
但是当我检查焦点元素时
文档.activeElement
它始终 <body>焦点所在的元素。我猜这要么是因为该元素没有获得焦点，要么该文档没有引用真实文档。
我尝试使用但没有任何运气来获取事件元素:
node.ownerDocument.activeElement
为什么文档的事件元素从未改变？
最佳答案
您没有向我们提供有关您的测试的大量信息，但我假设您正在使用 TestUtils.renderIntoDocument()，如果是这种情况，那么这就是您遇到此问题的原因。
请记住，TestUtils.renderIntoDocument() 将组件呈现为分离的 DOM 节点。因此，在不使用另一个 TestUtils 函数(该函数使用您提供的分离 DOM 节点)的情况下，测试聚焦/模糊节点的功能或通过类名或 ID 查找节点是相当困难的。
举个例子，假设您有一个如下所示的示例组件:
var Foo = React.createClass({
render : function () {
return (
<div className='foo'>
Sample Component
</div>
)
}
});
像这样的测试:
it('renders a div with className of "foo"', function () {
var foo = TestUtils.renderIntoDocument(<Foo />); //creates detached DOM node
var array1 = TestUtils.scryRenderedDOMComponentsWithClass(foo, 'foo');
var array2 = document.getElementsByClassName('foo');
expect(array1.length).toEqual(1); //passes
expect(array2.length).toEqual(1); //fails
});
第一个 Expect 语句会通过，因为您使用的是 TestUtils 函数，该函数会在您为类名创建的分离 DOM 节点中查找，并发现它很好。然而，第二个 Expect 语句将会失败，因为文档的根节点实际上没有任何类名为“foo”的子节点。
不过有一种方法可以解决这个问题。在我的项目中，我有一些用于聚焦/模糊节点的 React 组件，并使用一些无法使用 TestUtils 进行测试的文档函数。因此，对于这些特定的测试，我一直在使用一个名为 jasmine-react 的库。 。使用此功能，您可以使用 jasmineReact.render() 将组件渲染到附加的 DOM 节点中，并且它会在测试完成时为您进行清理工作。
因此，重写之前的测试会得到如下结果:
it('renders a div with className of "foo"', function () {
var jasmineReact = require('jasmine-react-helpers');
var foo = jasmineReact.render(<Foo />, document.body);
var array1 = TestUtils.scryRenderedDOMComponentsWithClass(foo, 'foo');
var array2 = document.getElementsByClassName('foo');
expect(array1.length).toEqual(1); //passes
expect(array2.length).toEqual(1); //passes
});
我认为值得一提的是，jasmine-react 存储库的所有者并没有积极维护它(至少在我写这篇文章时)，但它似乎暂时有效。
希望这有帮助!
关于jasmine - 在 React 测试中查找焦点元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31820218/