Question

我在简单的Jasmine测试中设置元素的焦点

var node = React.findDOMNode(component.refs.input);
node.focus();

但是当我检查聚焦元素时 document.activeElement 它是始终焦点的<body>元素。我猜这是因为元素没有获得焦点，或者文档没有引用真实文档。

我试图在没有运气的情况下使用活动元素：

node.ownerDocument.activeElement

为什么文档的活动元素不会发生变化？

Answer 1

您没有向我们提供有关您测试的大量信息，但我会假设您正在使用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
});

第一个期望语句将会通过，因为您正在使用TestUtils函数，该函数查找您为类名创建的分离DOM节点，并且发现它很好。但是，第二个期望声明会失败，因为该文档的根节点实际上没有任何类名为“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
});

我认为值得一提的是，茉莉花反应回购的所有者并没有积极维护它（至少在我写这篇文章的时候），但它似乎暂时有效。

希望这有帮助！

在反应测试中找到重点元素

1 个答案: