Let ReactTestUtils.Simulate.click work on non-dom components

[zpao]

@sebmarkbage suggested we do this to avoid the silly tagName requirement. Anything that can resolve to a node (getDOMNode) should work.

[jareware]

I'm interested in testing a React component without rendering it into a DOM; React.renderToString() works fine for making assertions, but not for triggering events.

Is it possible to somehow render a tree of React components without ever mounting it into a DOM, and performing assertions against it, or triggering synthetic events? I realize things like getDOMNode() could never work, but given I wasn't using it anywhere.

Also please tell me if this is just a silly idea. :)

[zpao]

Exactly that is coming, called shallow testing. It's not 100% supported but you'll be able to start using it in 0.13 (you can try 0.13 beta today). See #2963 for some details (documentation and links to impl).

[jareware]

That looks very interesting indeed! Commenting on that PR.

[robertknight]

React v0.13's shallow rendering allows you to render one level deep and test output but attempting to dispatch events in tests currently results in an error due to the DOM not being available:

import React from 'react/addons';

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = { pressed: false };
    }

    render() {
        return <div className={this.state.pressed ? 'button-pressed' : 'button'}
          onMouseDown={this.setState({pressed: true})}
          onMouseUp={this.setState({pressed: false})} />
    }
}

let shallowRenderer = React.addons.TestUtils.createRenderer();
let component = shallowRenderer.render(<Button/>);
let button = shallowRenderer.getRenderOutput();

// fails due to missing 'window' global
React.addons.TestUtils.Simulate.mouseDown(button);

/home/robert/projects/test/react-shallow-render/node_modules/react/lib/getEventTarget.js:23
  var target = nativeEvent.target || nativeEvent.srcElement || window;
                                                               ^
ReferenceError: window is not defined
    at getEventTarget (/home/robert/projects/test/react-shallow-render/node_modules/react/lib/getEventTarget.js:23:64)
    at new SyntheticEvent (/home/robert/projects/test/react-shallow-render/node_modules/react/lib/SyntheticEvent.js:69:24)
    at Object.mouseDown (/home/robert/projects/test/react-shallow-render/node_modules/react/lib/ReactTestUtils.js:416:17)
    at Object.<anonymous> (/home/robert/projects/test/react-shallow-render/index.js:21:33)
    at Module._compile (module.js:456:26)
    at normalLoader (/usr/local/lib/node_modules/babel/lib/babel/api/register/node.js:119:5)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel/lib/babel/api/register/node.js:132:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

[robertknight]

Is React.addons.TestUtils.Simulate.* already implemented for React Native? That would presumably have the same issues.

[vvo]

Hey Hi, how can we help in making this? Can you point me in some direction so I can implement this or is it a BIG change?