{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/445","repository_url":"https://api.github.com/repos/airbnb/enzyme","labels_url":"https://api.github.com/repos/airbnb/enzyme/issues/445/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/enzyme/issues/445/comments","events_url":"https://api.github.com/repos/airbnb/enzyme/issues/445/events","html_url":"https://github.com/airbnb/enzyme/issues/445","id":159188120,"number":445,"title":"Clarify shallow rendering behavior with props","user":{"login":"Aweary","id":6886061,"avatar_url":"https://avatars.githubusercontent.com/u/6886061?v=3","gravatar_id":"","url":"https://api.github.com/users/Aweary","html_url":"https://github.com/Aweary","followers_url":"https://api.github.com/users/Aweary/followers","following_url":"https://api.github.com/users/Aweary/following{/other_user}","gists_url":"https://api.github.com/users/Aweary/gists{/gist_id}","starred_url":"https://api.github.com/users/Aweary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aweary/subscriptions","organizations_url":"https://api.github.com/users/Aweary/orgs","repos_url":"https://api.github.com/users/Aweary/repos","events_url":"https://api.github.com/users/Aweary/events{/privacy}","received_events_url":"https://api.github.com/users/Aweary/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/airbnb/enzyme/labels/discussion","name":"discussion","color":"1d76db"},{"url":"https://api.github.com/repos/airbnb/enzyme/labels/Shallow","name":"Shallow","color":"fbca04"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-06-08T15:07:06Z","updated_at":"2016-08-02T08:15:24Z","closed_at":null,"body":"So our documentation has the following snippet: \r\nhttp://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html\r\n```js\r\nconst wrapper = shallow(<MyComponent foo={10} />);\r\nexpect(wrapper.prop('foo')).to.equal(10);\r\n```\r\n\r\nThe issue is that, unless this `foo` prop is being passed as props to a child element then this will actually fail. @lelandrichardson's [explanation of shallow rendering here](https://github.com/airbnb/enzyme/pull/377#issuecomment-218517694)\r\n\r\n>@nfcampos @Aweary if you want to really understand the reason, it can be stated like this:\r\n>\r\n> * Consider the full react render tree as a tree in 3-dimensional space\r\n> *  Consider the root component of a shallow call (ie, Foo in the case of wrapper(<Foo />)) as z=0 in this space\r\n> * In the case of shallow, we choose to look only at z=1, which includes essentially the full output of render() of the <Foo /> component.\r\n> * In the case of Foo being a DOM node, there is no z=1.\r\n\r\n>As a result, instead of making this an error case, we simply fall back to looking at z=0 instead of z=1.\r\n\r\n>I'm not sure if I consider this behavior wrong or less than ideal, but I do think that the fact that a large subset of our tests happen to test this case rather than the composite component case is the real problem.\r\n\r\nI'm of the opinion that we should be looking at `z=0` in all cases to properly support props that are defined on the root component in the `shallow` call. Users are doing stuff like:\r\n\r\n```js\r\n\r\nclass Foo extends Component {\r\n  render () {\r\n    return <div className='foo'>{this.props.foo}</div>\r\n  }\r\n}\r\n\r\n...\r\n\r\nconst wrapper = shallow(<Foo foo=\"bar\" />)\r\nexpect(wrapper.prop('foo')).to.equal('bar')\r\n```\r\n\r\nAnd it's failing because shallow is only looking at the returned `div` which only has a `className` and `children` prop.\r\n\r\nWe need to decide if this should be supported or not, and if so how we can do it. Any discussion/feedback would be great :)\r\n\r\n@nfcampos @blainekasten @lelandrichardson @ljharb "},"comment":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/comments/236835267","html_url":"https://github.com/airbnb/enzyme/issues/445#issuecomment-236835267","issue_url":"https://api.github.com/repos/airbnb/enzyme/issues/445","id":236835267,"user":{"login":"antz29","id":190449,"avatar_url":"https://avatars.githubusercontent.com/u/190449?v=3","gravatar_id":"","url":"https://api.github.com/users/antz29","html_url":"https://github.com/antz29","followers_url":"https://api.github.com/users/antz29/followers","following_url":"https://api.github.com/users/antz29/following{/other_user}","gists_url":"https://api.github.com/users/antz29/gists{/gist_id}","starred_url":"https://api.github.com/users/antz29/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/antz29/subscriptions","organizations_url":"https://api.github.com/users/antz29/orgs","repos_url":"https://api.github.com/users/antz29/repos","events_url":"https://api.github.com/users/antz29/events{/privacy}","received_events_url":"https://api.github.com/users/antz29/received_events","type":"User","site_admin":false},"created_at":"2016-08-02T08:15:24Z","updated_at":"2016-08-02T08:15:24Z","body":"@ljharb if you are doing TDD then you want to specify your public API, which for a component is it's props. This would also include verifying that defaultProps are the values you expect them to be etc. you are not validating that it works, you are testing that it hasn't changed and also documenting it's functionality. TDD is more about documentation and design that it's about testing, the tests are a nice side effect. /cc @atmd83 "}}
{"actor":{"display_login":"antz29"}}