{"id":15415265,"url":"https://github.com/jaredpalmer/jest-jsxstyle","last_synced_at":"2025-04-19T13:48:17.407Z","repository":{"id":57280379,"uuid":"99259254","full_name":"jaredpalmer/jest-jsxstyle","owner":"jaredpalmer","description":"🃏 Jest utilities for JSXStyle","archived":false,"fork":false,"pushed_at":"2018-06-22T09:13:52.000Z","size":123,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T08:22:39.224Z","etag":null,"topics":["css","jest","jest-utilities","jsxstyle","snapshot","snapshot-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredpalmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-03T17:37:56.000Z","updated_at":"2019-01-07T20:15:59.000Z","dependencies_parsed_at":"2022-09-20T00:13:24.168Z","dependency_job_id":null,"html_url":"https://github.com/jaredpalmer/jest-jsxstyle","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fjest-jsxstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fjest-jsxstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fjest-jsxstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fjest-jsxstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredpalmer","download_url":"https://codeload.github.com/jaredpalmer/jest-jsxstyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248758426,"owners_count":21156959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","jest","jest-utilities","jsxstyle","snapshot","snapshot-testing"],"created_at":"2024-10-01T17:07:45.787Z","updated_at":"2025-04-19T13:48:17.391Z","avatar_url":"https://github.com/jaredpalmer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jest-jsxstyle\n\nJest utilities for jsxstyle\n\n## The problem\n\nIf you use [`jsxstyle`](https://github.com/smyte/jsxstyle) as your CSS-in-JS solution, and you use\n[snapshot testing][snapshot] with [jest][jest] then you probably have some test\nsnapshots that look like:\n\n```html\n\u003ch1\n  class=\"jsxstyle-0\"\n\u003e\n  Hello World\n\u003c/h1\u003e\n```\n\nAnd that's not super helpful from a styling perspective. Especially when there\nare changes to the class, you can see that it changed, but you have to look\nthrough the code to know _what_ caused the class name to change.\n\n## This solution\n\nThis allows your snapshots to look more like:\n\n```html\n._15clmrq {\n  color:red;\n  display:block;\n}\n\n\u003ch1\n  class=\"_15clmrq\"\n\u003e\n  Hello World\n\u003c/h1\u003e\n```\n\nThis is much more helpful because now you can see the CSS applied and over time\nit becomes even more helpful to see how that changes over time.\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `devDependencies`:\n\n```\nnpm install --save-dev jest-jsxstyle\n```\n\n## Usage\n\nAt the top of your test file:\n\n```javascript\nimport serializer from 'jest-jsxstyle'\n\nexpect.addSnapshotSerializer(serializer)\n```\n\nOr in your Jest serializer config:\n\n```javascript\n{\n  \"snapshotSerializers\": [\n    \"jest-jsxstyle\"\n  ]\n}\n```\n\nAnd here's how we'd test them with `react-test-renderer`:\n\n```javascript\nimport React from 'react'\nimport renderer from 'react-test-renderer'\n\ntest('react-test-renderer', () =\u003e {\n  const tree = renderer\n    .create(\n      \u003cBlock color=\"orange\"\u003e\n        \u003cBlock margin=\"4rem\"\u003e\n          Hello World, this is my first jsxstyle component!\n        \u003c/Block\u003e\n      \u003c/Block\u003e\n    )\n    .toJSON()\n\n  expect(tree).toMatchSnapshot()\n})\n```\n\nWorks with enzyme too:\n\n```javascript\nimport * as enzyme from 'enzyme'\nimport toJson from 'enzyme-to-json'\n\ntest('enzyme', () =\u003e {\n  const ui = (\n    \u003cBlock color=\"orange\"\u003e\n      \u003cBlock margin=\"4rem\"\u003e\n        Hello World, this is my first jsxstyle component!\n      \u003c/Block\u003e\n    \u003c/Block\u003e\n  )\n\n  expect(toJson(enzyme.shallow(ui))).toMatchSnapshot(`enzyme.shallow`)\n  expect(toJson(enzyme.mount(ui))).toMatchSnapshot(`enzyme.mount`)\n  expect(toJson(enzyme.render(ui))).toMatchSnapshot(`enzyme.render`)\n})\n```\n\n# Inspiration\n\n- [`jest-styled-components`](https://github.com/styled-components/jest-styled-components)\n- [`jest-glamor-react`](https://github.com/kentcdodds/jest-glamor-react)\n\n\n\n## LICENSE\n\nMIT\n\n[glamor]: https://www.npmjs.com/package/glamor\n[snapshot]: http://facebook.github.io/jest/docs/snapshot-testing.html\n[jest]: http://facebook.github.io/jest/\n[MicheleBertoli]: https://github.com/MicheleBertoli\n[KentCDodds]: https://github.com/kentcdodds\n[jest-styled-components]: https://github.com/styled-components/jest-styled-components\n[`jest-glamor-react`]: https://github.com/kentcdodds/jest-glamor-react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fjest-jsxstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredpalmer%2Fjest-jsxstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fjest-jsxstyle/lists"}