{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/331","repository_url":"https://api.github.com/repos/airbnb/enzyme","labels_url":"https://api.github.com/repos/airbnb/enzyme/issues/331/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/enzyme/issues/331/comments","events_url":"https://api.github.com/repos/airbnb/enzyme/issues/331/events","html_url":"https://github.com/airbnb/enzyme/issues/331","id":149317462,"number":331,"title":"wrapper.prop(key) function returning undefined on with React Native components","user":{"login":"Chris-Petty","id":7684221,"avatar_url":"https://avatars.githubusercontent.com/u/7684221?v=3","gravatar_id":"","url":"https://api.github.com/users/Chris-Petty","html_url":"https://github.com/Chris-Petty","followers_url":"https://api.github.com/users/Chris-Petty/followers","following_url":"https://api.github.com/users/Chris-Petty/following{/other_user}","gists_url":"https://api.github.com/users/Chris-Petty/gists{/gist_id}","starred_url":"https://api.github.com/users/Chris-Petty/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Chris-Petty/subscriptions","organizations_url":"https://api.github.com/users/Chris-Petty/orgs","repos_url":"https://api.github.com/users/Chris-Petty/repos","events_url":"https://api.github.com/users/Chris-Petty/events{/privacy}","received_events_url":"https://api.github.com/users/Chris-Petty/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-04-19T01:12:32Z","updated_at":"2016-07-05T19:31:06Z","closed_at":"2016-07-05T19:31:06Z","body":"Running shallow tests on the below code I get errors due to .prop() returning undefined rather than the value corresponding to the prop key. Console output and a log of one of the objects follow below.\r\n\r\n```\r\nimport React, { TextInput, Text, View } from 'react-native';\r\nimport { expect } from 'chai';\r\nimport { shallow } from 'enzyme';\r\n\r\ndescribe('Text', () => {\r\n  it('to work nicely', () => {\r\n    const wrapper = shallow(<Text value={50} />);\r\n    expect(wrapper.prop('value')).to.equal(50);\r\n  });\r\n});\r\n```\r\n\r\n```\r\n  1) Text to work nicely:\r\n     AssertionError: expected undefined to equal 50\r\n      at Context.<anonymous> (test.spec.js:9:38)\r\n```\r\n\r\nInserting `console.log(wrapper);` into the test, the object shows that the prop value is there:\r\n\r\n```\r\nShallowWrapper {\r\n  root: [Circular],\r\n  unrendered: \r\n   { '$$typeof': Symbol(react.element),\r\n     type: { [Function] displayName: 'Text', propTypes: [Object] },\r\n     key: null,\r\n     ref: null,\r\n     props: { value: 50 },\r\n     _owner: null,\r\n     _store: {} },\r\n  renderer: \r\n   { _instance: \r\n      { _currentElement: [Object],\r\n        _rootNodeID: '.12g8lhtj1mo',\r\n        _instance: [Object],\r\n        _pendingElement: null,\r\n        _pendingStateQueue: null,\r\n        _pendingReplaceState: false,\r\n        _pendingForceUpdate: false,\r\n        _renderedComponent: [Object],\r\n        _context: {},\r\n        _mountOrder: 3,\r\n        _topLevelWrapper: null,\r\n        _pendingCallbacks: null },\r\n     render: [Function: render],\r\n     getRenderOutput: [Function: getRenderOutput] },\r\n  node: null,\r\n  nodes: [ null ],\r\n  length: 1,\r\n  options: {} }\r\n```\r\n\r\nI've tested this with View and TextInput and had the same issue."},"comment":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/comments/230578503","html_url":"https://github.com/airbnb/enzyme/issues/331#issuecomment-230578503","issue_url":"https://api.github.com/repos/airbnb/enzyme/issues/331","id":230578503,"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},"created_at":"2016-07-05T19:31:06Z","updated_at":"2016-07-05T19:31:06Z","body":"@jerrysu's link is on point, that's exactly the reason you're seeing this behavior. Specifically:\r\n\r\n>when you run shallow(<Foo />), you are rendering Foo, and then wrapping around the result... so the wrapper by default is looking at the root node (which in your example is a div).\r\n\r\nSo you're `wrapper` isn't wrappeing the `<Text />` component, it's wrapping what it returns, so your `prop` call is testing whatever the root node returned from `<Text />` is. This is expected behavior with `shallow`.\r\n\r\nIt's probably also worth mentioning that a test like:\r\n\r\n```js\r\n    const wrapper = shallow(<Text value={50} />);\r\n    expect(wrapper.prop('value')).to.equal(50);\r\n```\r\n\r\nis essentially meaningless. You just passed in `50` to the `value` prop so testing that the `value` prop on your component is `50` provides no actual benefit. You'd probably want to test that `value` is being consumed/used as you'd expect it to instead.\r\n\r\nI'm closing this since it's expected behavior, but feel free to ask any additional questions!"}}
{"actor":{"display_login":"Aweary"}}