我在一个简单的Jasmine测试中设置了一个元素的焦点
var node = React.findDOMNode(component.refs.input);
node.focus();
但是当我用document.activeElement检查focus元素时,它始终<body>是焦点的元素.我猜这是因为元素没有获得焦点或文档不是指真实的文档.
我试图在没有运气的情况下使用活动元素:
node.ownerDocument.activeElement
为什么文档的活动元素不会改变？
您没有向我们提供有关您的测试的大量信息,但我会假设您正在使用TestUtils.renderIntoDocument(),如果是这种情况,那么这就是您遇到此问题的原因.
请记住,TestUtils.renderIntoDocument()将组件呈现为分离的DOM节点.因此,很难测试聚焦/模糊节点的功能,或者通过类名或ID查找节点而不使用另一个TestUtils函数,该函数使用您提供的分离DOM节点.
举个例子,假设您有一个如下所示的示例组件:
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节点,并且发现它很好.但是,第二个期望语句将失败,因为文档的根节点实际上没有任何类名为"foo"的子节点.
虽然有一种解决方法.在我的项目中,我有一些React组件可以聚焦/模糊节点,并使用一些你无法用TestUtils测试的文档函数.所以对于那些特定的测试,我一直在使用一个名为jasmine-react的库.使用它,您可以使用组件将组件渲染到附加的DOM节点中jasmineReact.render(),并在测试完成时为您进行清理.
所以,从早先重写那个测试会给你这样的东西:
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
});
我想值得一提的是,茉莉花反应回购的所有者并未积极维护它(至少在我写这篇文章的时候),但它似乎暂时有效.
希望这可以帮助!
| 归档时间： |
|
| 查看次数： |
2844 次 |
| 最近记录： |