{"action":"opened","issue":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/579","repository_url":"https://api.github.com/repos/airbnb/enzyme","labels_url":"https://api.github.com/repos/airbnb/enzyme/issues/579/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/enzyme/issues/579/comments","events_url":"https://api.github.com/repos/airbnb/enzyme/issues/579/events","html_url":"https://github.com/airbnb/enzyme/issues/579","id":175060488,"number":579,"title":"Incorrect shallow rendering incase of children with the same key","user":{"login":"faalsh","id":21036693,"avatar_url":"https://avatars.githubusercontent.com/u/21036693?v=3","gravatar_id":"","url":"https://api.github.com/users/faalsh","html_url":"https://github.com/faalsh","followers_url":"https://api.github.com/users/faalsh/followers","following_url":"https://api.github.com/users/faalsh/following{/other_user}","gists_url":"https://api.github.com/users/faalsh/gists{/gist_id}","starred_url":"https://api.github.com/users/faalsh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/faalsh/subscriptions","organizations_url":"https://api.github.com/users/faalsh/orgs","repos_url":"https://api.github.com/users/faalsh/repos","events_url":"https://api.github.com/users/faalsh/events{/privacy}","received_events_url":"https://api.github.com/users/faalsh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-05T12:23:46Z","updated_at":"2016-09-05T12:23:46Z","closed_at":null,"body":"Let's say we have a component that recieve an array and renders them in a list\r\n```\r\nvar List = React.createClass({\r\n  render: function() {\r\n    return (\r\n    <div>\r\n    \t{\r\n      \tthis.props.items.map(function(item){\r\n        \treturn <div className=\"item\" key={item.id}>{item.name}</div>;\r\n        })\r\n      }\r\n     </div>\r\n    )\r\n  }\r\n});\r\n```\r\n\r\nand let's say we passed the following array:\r\n```\r\nvar items = [{id:'1', name: 'one'},{id:'1', name: 'two'}];\r\n```\r\nsince the id is a duplicate, React will render only one item and throws the following warning \r\n```\r\nEncountered two children with the same key, `1`. Child keys must be unique; when two children share a key, only the first child will be used.\r\n    in div (created by List)\r\n    in List\r\n```\r\nHere is a demo for the above https://jsfiddle.net/69z2wepo/55187/\r\n\r\n\r\nHowever, when using shallow to render the item and test it, the shallow function will return two items instead of 1. \r\n\r\n```\r\ndescribe('<List>', () =>\r\n\r\n  // this should fail because it is rendering only one item in the browser due to duplicate keys\r\n  it('should render the correct number of items', () => {\r\n    expect(shallow(<List  items={items} />).find('div.item').length).toBe(2)\r\n  }),\r\n\r\n);\r\n```\r\n\r\nCurrently the above test case passes which is not correct. \r\n\r\nAny advise or thought?\r\n"}}
{"actor":{"display_login":"faalsh"}}