{"action":"created","issue":{"url":"https://api.github.com/repos/guigrpa/jest-html/issues/8","repository_url":"https://api.github.com/repos/guigrpa/jest-html","labels_url":"https://api.github.com/repos/guigrpa/jest-html/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/guigrpa/jest-html/issues/8/comments","events_url":"https://api.github.com/repos/guigrpa/jest-html/issues/8/events","html_url":"https://github.com/guigrpa/jest-html/issues/8","id":314307391,"node_id":"MDU6SXNzdWUzMTQzMDczOTE=","number":8,"title":"When using styled components the included CSS is not used in snapshot. ","user":{"login":"larsno","id":10037588,"node_id":"MDQ6VXNlcjEwMDM3NTg4","avatar_url":"https://avatars0.githubusercontent.com/u/10037588?v=4","gravatar_id":"","url":"https://api.github.com/users/larsno","html_url":"https://github.com/larsno","followers_url":"https://api.github.com/users/larsno/followers","following_url":"https://api.github.com/users/larsno/following{/other_user}","gists_url":"https://api.github.com/users/larsno/gists{/gist_id}","starred_url":"https://api.github.com/users/larsno/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/larsno/subscriptions","organizations_url":"https://api.github.com/users/larsno/orgs","repos_url":"https://api.github.com/users/larsno/repos","events_url":"https://api.github.com/users/larsno/events{/privacy}","received_events_url":"https://api.github.com/users/larsno/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-04-14T07:28:24Z","updated_at":"2018-08-15T15:45:00Z","closed_at":null,"author_association":"NONE","body":"### Description\r\nI'm using `styled-components` and `jest-styled-components` and `jest-html`. This setup places CSS in the snapshot to display differences. However this CSS is not available in stylesheets. `jest-html` is not making use of these styles so the benefit of `jest-html` is lost with `styled-components`. Please consider providing support for `styled-components` . \r\n\r\n### Details\r\n`jest-styled-components` places the CSS into the snapshot as follows: \r\n\r\n```html\r\n// Jest Snapshot v1, https://goo.gl/fbAQLP\r\n\r\nexports[`Rac - Runner basic snapshot test matches correctly. 1`] = `\r\n.c0 {\r\n  display: grid;\r\n  grid-template-columns: repeat(12,1fr);\r\n  font-size: 1rem;\r\n  color: #fff;\r\n  -webkit-align-items: center;\r\n  -webkit-box-align: center;\r\n  -ms-flex-align: center;\r\n  align-items: center;\r\n  padding: 0.2rem 0.2rem 0.2rem 0.2rem;\r\n  padding-top: 0.5rem;\r\n  padding-bottom: 0.5rem;\r\n  background: #474F59;\r\n}\r\n.c0:not(:last-child) {\r\n  border-bottom: solid 1px #474F59;\r\n}\r\n.c1 {\r\n  grid-column: 1 / span 1;\r\n  border: none;\r\n  grid-column: 1 / span 1;\r\n}\r\n.c1 > div {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  border-radius: 50%;\r\n  border: solid 1px #66071D;\r\n  background: #900001;\r\n  padding: 3px 0px 0px 0px;\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  font-style: italic;\r\n}\r\n.c2 {\r\n  grid-column: 2 / span 7;\r\n  text-align: left;\r\n  margin-left: -0.8rem;\r\n}\r\n.c3 {\r\n  text-align: left;\r\n  font-weight: 500;\r\n  font-size: 1.1rem;\r\n  -webkit-letter-spacing: -0.22px;\r\n  -moz-letter-spacing: -0.22px;\r\n  -ms-letter-spacing: -0.22px;\r\n  letter-spacing: -0.22px;\r\n  color: #fff;\r\n}\r\n.c4 {\r\n  color: white;\r\n  font-weight: 400;\r\n  font-size: 0.90rem;\r\n  justify-self: center;\r\n  grid-column: 9 / span 1;\r\n  color: white;\r\n}\r\n.c5 {\r\n  color: white;\r\n  font-weight: 400;\r\n  font-size: 0.90rem;\r\n  justify-self: center;\r\n  grid-column: 10 / span 1;\r\n}\r\n.c6 {\r\n  color: white;\r\n  font-weight: 400;\r\n  font-size: 0.90rem;\r\n  justify-self: center;\r\n  grid-column: 11 / span 1;\r\n  color: white;\r\n}\r\n.c7 {\r\n  color: white;\r\n  font-weight: 400;\r\n  font-size: 0.90rem;\r\n  justify-self: center;\r\n  grid-column: 12 / span 1;\r\n}\r\n\r\n<li className=\"racs__rac__runners__runner c0\">\r\n  <div className=\"racs__rac__runners__runner__number c1\">\r\n    <div>1</div>\r\n  </div>\r\n  <div className=\"c2\">\r\n    <div>\r\n      <span className=\"racs__rac__runners__runner__name c3\">\r\n        Danehill Downs\r\n      </span>\r\n    </div>\r\n    <div />\r\n  </div>\r\n  <div className=\"racs__rac__runners__runner__fixed_odds c4\">\r\n    4.60\r\n  </div>\r\n  <div className=\"racs__rac__runners__runner__nsw_odds c5\">\r\n    0.00\r\n  </div>\r\n  <div className=\"racs__rac__runners__runner__stab_odds c6\">\r\n    -\r\n  </div>\r\n  <div className=\"racs__rac__runners__runner__ubet_odds c7\">\r\n    0.00\r\n  </div>\r\n</li>\r\n`;\r\n```\r\nThe current version of `jest-html` adds the following preview and corrects the `class` attribute name:\r\n\r\n```html\r\n------------HTML PREVIEW---------------\r\n<li class=\"racs__rac__runners__runner c0\">\r\n  <div class=\"racs__rac__runners__runner__number c1\">\r\n    <div>1</div>\r\n  </div>\r\n  <div class=\"c2\">\r\n    <div>\r\n      <span class=\"racs__rac__runners__runner__name c3\">\r\n        Danehill Downs\r\n      </span>\r\n    </div>\r\n    <div />\r\n  </div>\r\n  <div class=\"racs__rac__runners__runner__fixed_odds c4\">\r\n    4.60\r\n  </div>\r\n  <div class=\"racs__rac__runners__runner__nsw_odds c5\">\r\n    0.00\r\n  </div>\r\n  <div class=\"racs__rac__runners__runner__stab_odds c6\">\r\n    -\r\n  </div>\r\n  <div class=\"racs__rac__runners__runner__ubet_odds c7\">\r\n    0.00\r\n  </div>\r\n</li>\r\n```\r\nThis renders as follows which is not very helpful. \r\n![image](https://user-images.githubusercontent.com/10037588/38765582-c90b33ee-4007-11e8-826a-1fa8f37b46dc.png)\r\n\r\nOn the other hand if `jest-html` also added the CSS in a `<style>` element a much better image is rendered. \r\n![image](https://user-images.githubusercontent.com/10037588/38765599-5845f49a-4008-11e8-91f5-52629a9c03ae.png)\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/guigrpa/jest-html/issues/comments/413240022","html_url":"https://github.com/guigrpa/jest-html/issues/8#issuecomment-413240022","issue_url":"https://api.github.com/repos/guigrpa/jest-html/issues/8","id":413240022,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMzI0MDAyMg==","user":{"login":"guigrpa","id":2129481,"node_id":"MDQ6VXNlcjIxMjk0ODE=","avatar_url":"https://avatars3.githubusercontent.com/u/2129481?v=4","gravatar_id":"","url":"https://api.github.com/users/guigrpa","html_url":"https://github.com/guigrpa","followers_url":"https://api.github.com/users/guigrpa/followers","following_url":"https://api.github.com/users/guigrpa/following{/other_user}","gists_url":"https://api.github.com/users/guigrpa/gists{/gist_id}","starred_url":"https://api.github.com/users/guigrpa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guigrpa/subscriptions","organizations_url":"https://api.github.com/users/guigrpa/orgs","repos_url":"https://api.github.com/users/guigrpa/repos","events_url":"https://api.github.com/users/guigrpa/events{/privacy}","received_events_url":"https://api.github.com/users/guigrpa/received_events","type":"User","site_admin":false},"created_at":"2018-08-15T15:45:00Z","updated_at":"2018-08-15T15:45:00Z","author_association":"OWNER","body":"I am just now updating this project to use the latest dependencies (React, Jest, etc.), which should also solve some pending issues. And I've just seen your issue, my apologies for being so late!!\r\n\r\nI've always used the `package.json` configuration like this:\r\n\r\n```json\r\n  \"jest\": {\r\n    \"snapshotSerializers\": [\"jest-html\"]\r\n  },\r\n```\r\n\r\nThis way, you can order the serializers arbitrarily.\r\n\r\nI hope this is useful!\r\n"}}
{"actor":{"display_login":"guigrpa"}}