TestUtils.renderIntoDocument doesn't function as expected in all browsers

Hi,

Here is my program (jsfiddle):

var Input = React.createClass({
    render: function() {
        return (
            <input 
                {...this.props}
            />
        );
    }
});

var TestUtils = React.addons.TestUtils;
var inputInstance = 
        TestUtils.renderIntoDocument(
            <Input
                value='abc'
            />
        );

var inputDOMNode = React.findDOMNode(inputInstance);

inputDOMNode.focus();

// Place cursor at the end.
inputDOMNode.setSelectionRange(3, 3);

// Should log 3 twice.
console.log(inputDOMNode.selectionStart);
console.log(inputDOMNode.selectionEnd);

Problem: 0 is logged twice in Chrome and Firefox. What I expected: 3 is logged twice. We see this in Safari.

The interesting part is if we use React.render(..., document.body) instead of TestUtils.renderIntoDocument the program works as expected.

I am using:

• Chrome 42.0.2311.135
• Firefox 37.0.2
• Safari 8.0.5 (10600.5.17)

[marcysutton]

This is definitely a problem for accessibility testing. We need components to be attached to test them fully, as the current method makes the tree appear to be hidden. It would be really helpful to have blessed methods for doing this, as appending to the body and then removing messes up my other tests with “The DOM was unexpectedly mutated” errors.

[sophiebits]

@marcysutton Thanks, that’s useful feedback. If you do need to append to the document then the most straightforward and flexible solution is to call ReactDOM.render manually:

var div = document.createElement('div');
document.body.appendChild(div);
ReactDOM.render(<Foo />, div);

That’s also exactly what the implementation of any test helper we might provide would do.