{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/4127","labels_url":"https://api.github.com/repos/facebook/react/issues/4127/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/4127/comments","events_url":"https://api.github.com/repos/facebook/react/issues/4127/events","html_url":"https://github.com/facebook/react/issues/4127","id":88286510,"number":4127,"title":"shallow rendering / testing components with 'render callbacks'","user":{"login":"threepointone","id":18808,"avatar_url":"https://avatars.githubusercontent.com/u/18808?v=3","gravatar_id":"","url":"https://api.github.com/users/threepointone","html_url":"https://github.com/threepointone","followers_url":"https://api.github.com/users/threepointone/followers","following_url":"https://api.github.com/users/threepointone/following{/other_user}","gists_url":"https://api.github.com/users/threepointone/gists{/gist_id}","starred_url":"https://api.github.com/users/threepointone/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/threepointone/subscriptions","organizations_url":"https://api.github.com/users/threepointone/orgs","repos_url":"https://api.github.com/users/threepointone/repos","events_url":"https://api.github.com/users/threepointone/events{/privacy}","received_events_url":"https://api.github.com/users/threepointone/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-06-15T01:48:29Z","updated_at":"2015-06-15T03:42:36Z","closed_at":null,"body":"based on [this comment](https://github.com/facebook/react/issues/3398#issuecomment-110758922) and this [thread](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626), starting this thread to discuss how to test components with 'render callbacks'.\r\n\r\nConsider the following 'app'.\r\n```js\r\nclass Double{\r\n  render(){\r\n    return this.props.children(this.props.value * 2);\r\n  }\r\n}\r\n\r\nclass App extends React.Component{\r\n  render(){\r\n    return <Double value={this.props.input}>{\r\n      doubled => <div>{doubled}</div>\r\n    }</A>;\r\n  }\r\n}\r\n\r\nReact.render(<App input={10}/>, el);  // will output '20', as expected\r\n```\r\n\r\nNow, if we wanted to test this, we could write something like - \r\n```js \r\nvar stateful = TestUtils.renderIntoDocument(<App input={50}/>);\r\n\r\nvar div = TestUtils.findRenderedDOMComponentWithTag(stateful, 'div');\r\ndiv.getDOMNode().textContent.should.eql('100');\r\n```\r\n\r\nHowever, we can't test beyond the callback boundary with `ReactShallowRenderer`.\r\n```js\r\n// this doesn't work, of course\r\nTestUtils.createRenderer().render(<App input={50}/>).getRenderOutput()\r\n  .should.eql(<Double value={this.props.input}>\r\n    <div>{100}</div>\r\n  </A>)\r\n```\r\n\r\nUnclear how to approach this, frankly. Should ShallowRenderer 'recognize' components like this? Or should they be marked with a flag? (this.rendersCallback = true ?). The only workaround for now is to not use the ShallowRenderer :(\r\n\r\n/cc @pspeter3 "},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/111911664","html_url":"https://github.com/facebook/react/issues/4127#issuecomment-111911664","issue_url":"https://api.github.com/repos/facebook/react/issues/4127","id":111911664,"user":{"login":"pspeter3","id":607701,"avatar_url":"https://avatars.githubusercontent.com/u/607701?v=3","gravatar_id":"","url":"https://api.github.com/users/pspeter3","html_url":"https://github.com/pspeter3","followers_url":"https://api.github.com/users/pspeter3/followers","following_url":"https://api.github.com/users/pspeter3/following{/other_user}","gists_url":"https://api.github.com/users/pspeter3/gists{/gist_id}","starred_url":"https://api.github.com/users/pspeter3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pspeter3/subscriptions","organizations_url":"https://api.github.com/users/pspeter3/orgs","repos_url":"https://api.github.com/users/pspeter3/repos","events_url":"https://api.github.com/users/pspeter3/events{/privacy}","received_events_url":"https://api.github.com/users/pspeter3/received_events","type":"User","site_admin":false},"created_at":"2015-06-15T03:42:36Z","updated_at":"2015-06-15T03:42:36Z","body":"The way that we are handling it is to avoid render callbacks entirely and just use `React.cloneElement`. This way you **must** pass a component to the boundary. This allows the developer to test the parent and the child separately knowing that there will not be arbitrary code being executed."}}