A better shallow renderer?

[Yomguithereal]

Hello @vvo,
Following up our meetup conversation from yesterday: let's say we can get rid of the whole jsdom providing a global document etc. thing, what should an ideal shallow renderer (or even a full-fledged testing renderer) be able to perform so we can finally unit test React components properly?

I guess this includes supporting refs somewhat etc. (by the way do you have a pratical example somewhere of ref testing?).

[vvo]

Hi @Yomguithereal great that you opened this issue.

Right now what we miss is missing refs (facebook/react#2393) and simulate (facebook/react#1445).

Simulate can be handled by just calling the underlying props.onHandler*.

Refs are problematic, let's say you have this code:

class Button extends React.Component {
  _handleClick() {
    // use this.refs.hello.value => fail
  },
  render() {
    return (
      <div onClick={this._handleClick.bind(this)}>
        <input type="text" ref="hello" />
      </div>);
  }
}

Then you cannot test it with a shallow rendering right now. You will need to use renderIntoDocument.

[vvo]

I really dunno how to handle such cases, do we need to PR react to handle those or create our own renderer and expose it as a module (that would be cool).

As for full fledged libs, there's https://github.com/Legitcode/tests but I never tested it.

[Yomguithereal]

Ok. Let me find some time to check React's shallow renderer implementation and see whether one can fiddle something around it somehow.

[ponelat]

Have you guys done anything towards this? It seems an excellent move towards testing react completely without a DOM. Since react will naturally be slower moving than any custom module, I'm pinging here first.

[vvo]

Nope nothing on my side, I don't even know or imagine how to do it and what would it bring :)

[ponelat]

A great mystery it is! I don't have a pressing need, otherwise I'd want to implement this. Hopefully someone can pick up the ball. Thanks for the thread here.