{"action":"opened","issue":{"url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/129","repository_url":"https://api.github.com/repos/styled-components/jest-styled-components","labels_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/129/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/129/comments","events_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/129/events","html_url":"https://github.com/styled-components/jest-styled-components/issues/129","id":307811551,"number":129,"title":"Does not work when rendering using react-testing-library","user":{"login":"SavePointSam","id":8203211,"avatar_url":"https://avatars0.githubusercontent.com/u/8203211?v=4","gravatar_id":"","url":"https://api.github.com/users/SavePointSam","html_url":"https://github.com/SavePointSam","followers_url":"https://api.github.com/users/SavePointSam/followers","following_url":"https://api.github.com/users/SavePointSam/following{/other_user}","gists_url":"https://api.github.com/users/SavePointSam/gists{/gist_id}","starred_url":"https://api.github.com/users/SavePointSam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SavePointSam/subscriptions","organizations_url":"https://api.github.com/users/SavePointSam/orgs","repos_url":"https://api.github.com/users/SavePointSam/repos","events_url":"https://api.github.com/users/SavePointSam/events{/privacy}","received_events_url":"https://api.github.com/users/SavePointSam/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-22T20:55:53Z","updated_at":"2018-03-22T20:55:53Z","closed_at":null,"author_association":"NONE","body":"I've been moving a few of my tests over to [react-testing-library](https://github.com/kentcdodds/react-testing-library) as I prefer the simple approach. However, this utility does not appear to work with the way the `render` function from that library works.\r\n\r\nI'm not sure who is responsible for fixing compatibility, though RTL just uses react-test-renderer under the hood in a very lightweight manner. I expected that this utility would work because of the thinness of the wrapper. However, I was only able to get the snapshots I desired when working with react-test-renderer directly.\r\n\r\n---\r\n\r\n```\r\nimport React from 'react';\r\nimport { render, Simulate, flushPromises } from 'react-testing-library';\r\n\r\nimport Button from '../Button';\r\n\r\nconst { getByTestId, container } = render(<Button />);\r\n\r\ndescribe('<Button />', () => {\r\n  it('matches last snapshot', () => {\r\n    expect(container).toMatchSnapshot();\r\n  });\r\n});\r\n```\r\n\r\nResults in the following snapshot:\r\n\r\n```\r\n// Jest Snapshot v1, https://goo.gl/fbAQLP\r\n\r\nexports[`<Button /> render matches last snapshot 1`] = `\r\n<div>\r\n  <button\r\n    aria-disabled=\"false\"\r\n    class=\"t-secondary sc-bdVaJa aolTD\"\r\n    role=\"button\"\r\n  />\r\n</div>\r\n`;\r\n```\r\n\r\n---\r\n\r\nI would've thought I could get around this by accessing the first child of the container that RTL provides, but that doesn't work as expected either.\r\n\r\n---\r\n\r\n```\r\nimport React from 'react';\r\nimport { render, Simulate, flushPromises } from 'react-testing-library';\r\n\r\nimport Button from '../Button';\r\n\r\nconst { getByTestId, container } = render(<Button />);\r\n\r\ndescribe('<Button />', () => {\r\n  it('matches last snapshot', () => {\r\n    expect(container.firstChild).toMatchSnapshot();\r\n  });\r\n});\r\n```\r\n\r\nbecomes:\r\n\r\n```\r\n// Jest Snapshot v1, https://goo.gl/fbAQLP\r\n\r\nexports[`<Button /> render matches last snapshot 1`] = `\r\n<button\r\n  aria-disabled=\"false\"\r\n  class=\"t-secondary sc-bdVaJa aolTD\"\r\n  role=\"button\"\r\n/>\r\n`;\r\n```\r\n\r\n---\r\n\r\nHowever, using react-test-renderer directly works as expected:\r\n\r\n---\r\n\r\n```\r\nimport React from 'react';\r\nimport renderer from 'react-test-renderer';\r\n\r\nimport Button from '../Button';\r\n\r\ndescribe('<Button />', () => {\r\n  it('matches last snapshot', () => {\r\n    expect(\r\n      renderer.create(<Button {...defaultProps} />).toJSON(),\r\n    ).toMatchSnapshot();\r\n  });\r\n});\r\n```\r\n\r\nbecomes:\r\n\r\n```\r\nc0 {\r\n  color: green;\r\n}\r\n\r\n<button\r\n  aria-disabled=\"false\"\r\n  className=\"t-secondary c0\"\r\n  role=\"button\"\r\n/>\r\n```\r\n\r\ncc/ @kentcdodds "}}
{"actor":{"display_login":"SavePointSam"}}