Implement Shallow Testing

[sebmarkbage]

We need a way to test the output of a single level React component without resolving it all the way down to the bottom layer (whatever that is).

I'm thinking something like this:

var shallowRenderer = ReactTestUtils.createRenderer();
shallowRenderer.render(<SomeComponent />);
shallowRenderer.attachRef('myRefName', someMock);

var result = shallowRenderer.getRenderOutput();
expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="child1" />,
  <span className="child2" />
]);

shallowRenderer.render(<SomeComponent aNew="Prop" />);

var updatedResult = shallowRenderer.getRenderOutput();
expect(updatedResult.type).toBe('a');

updatedResult.props.onClick(mockEvent);

var updatedResultCausedByClick = shallowRenderer.getRenderOutput();
expect(updatedResult.props.className).toBe('was-clicked');

var instance = shallowRenderer.getMountedInstance();
instance.customFunction();

var updatedResultCausedByCustomFunction = shallowRenderer.getRenderOutput();
expect(updatedResultCausedByCustomFunction.props.className).toBe('custom');

Basically, this fix needs to go through the entire life-cycle of ReactCompositeComponent. It just needs to bail out whenever it would've continued rendering.

[sebmarkbage]

Reopened so that we can track the remaining features (refs etc.)

[graue]

Weird, I thought GitHub only closed issues if you used language like "fixes #NNNN", not if you simply mentioned the issue at all. Sorry about that.

[sophiebits]

The PR text included "WIP to fix #2393."

[graue]

Is the rest (refs support) blocked by #1373 or can more work be done now? @sebmarkbage

[gaearon]

Any reason this doesn't support setState other than that it's not implemented yet?
I was hoping to do something like

var shallowRenderer = ReactTestUtils.createRenderer();
var instance = shallowRenderer.render(<SomeComponent />);

var result = shallowRenderer.getRenderOutput();
expect(result.type).toBe('div');

instance.handleClick(); // will call setState inside

result = shallowRenderer.getRenderOutput();
expect(result.type).toBe('span'); // imagine it returns <span> with different state

[graue]

@gaearon, that's supposed to work. Can you post a minimal repro?

[gaearon]

@graue How do you do this? render does not return an instance.