{"id":14989726,"url":"https://github.com/mbasso/styled-components-test-utils","last_synced_at":"2025-02-27T06:13:03.414Z","repository":{"id":57373291,"uuid":"96441524","full_name":"mbasso/styled-components-test-utils","owner":"mbasso","description":"Test utils for styled-components compatible with jest, expect, chai and jasmine","archived":false,"fork":false,"pushed_at":"2024-08-27T21:30:32.000Z","size":67,"stargazers_count":47,"open_issues_count":4,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-20T05:13:00.350Z","etag":null,"topics":["chai","css","expect","jasmine","jest","react","styled-components","test"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mbasso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-06T14:51:26.000Z","updated_at":"2025-01-09T20:20:19.000Z","dependencies_parsed_at":"2024-09-24T16:08:47.600Z","dependency_job_id":null,"html_url":"https://github.com/mbasso/styled-components-test-utils","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":0.3548387096774194,"last_synced_commit":"f290774feca32d322dd3af07a017f195f7135feb"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fstyled-components-test-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fstyled-components-test-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fstyled-components-test-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fstyled-components-test-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbasso","download_url":"https://codeload.github.com/mbasso/styled-components-test-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240987439,"owners_count":19889335,"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":["chai","css","expect","jasmine","jest","react","styled-components","test"],"created_at":"2024-09-24T14:18:49.991Z","updated_at":"2025-02-27T06:13:03.389Z","avatar_url":"https://github.com/mbasso.png","language":"JavaScript","readme":"# styled-components-test-utils\n\n[![Build Status](https://travis-ci.org/mbasso/styled-components-test-utils.svg?branch=master)](https://travis-ci.org/mbasso/styled-components-test-utils)\n[![npm version](https://img.shields.io/npm/v/styled-components-test-utils.svg)](https://www.npmjs.com/package/styled-components-test-utils)\n[![npm downloads](https://img.shields.io/npm/dm/styled-components-test-utils.svg?maxAge=2592000)](https://www.npmjs.com/package/styled-components-test-utils)\n[![Coverage Status](https://coveralls.io/repos/github/mbasso/styled-components-test-utils/badge.svg?branch=master)](https://coveralls.io/github/mbasso/styled-components-test-utils?branch=master)\n\n\u003e Test utils for styled-components compatible with jest, expect, chai and jasmine\n\n## Table of Contents\n\n- [Motivation](#motivation)\n- [Installation](#installation)\n\t- [Jest](#jest)\n\t- [Expect](#expect)\n\t- [Chai](#chai)\n\t- [Jasmine](#jasmine)\n- [Api](#api)\n\t- [toHaveStyleRule](#tohavestylerule)\n\t- [toNotHaveStyleRule](#tonothavestylerule)\n\t- [toHaveKeyframeRule](#tohavekeyframerule)\n\t- [toHaveComponent](#tohavecomponent)\n\t- [toBeAGlobalStyle](#tobeaglobalstyle)\n\t- [toMatchSnapshot](#tomatchsnapshot)\n- [Change Log](#change-log)\n- [Authors](#authors)\n- [Copyright and License](#copyright-and-license)\n\n## Motivation\nThis project is based on one simple idea: write a powerful set of test-utils for styled-components compatible with a lot assertion libraries.\nThis is born from the willing to use [jest-styled-components](https://github.com/styled-components/jest-styled-components) (a useful project on which this one is based) with [expect](https://github.com/mjackson/expect).\n\n## Installation\n\nYou can install styled-components-test-utils using [npm](https://www.npmjs.com/package/styled-components-test-utils):\n\n```bash\nnpm install --save-dev styled-components-test-utils\n```\n\nand if you haven't `react-test-renderer`:\n\n```bash\nnpm install --save-dev react-test-renderer\n```\n\nand following one of these: [Jest](#jest), [Expect](#expect), [Chai](#chai), [Jasmine](#jasmine)\n\n### Jest\nTo use styled-components-test-utils with jest, you simply have to import the following:\n\n```js\nimport 'styled-components-test-utils/lib/jest';\n\n// ...\n\nexpect(component).toHaveStyleRule(property, value);\n```\n\n### Expect\nTo use styled-components-test-utils with expect, you have to do the following:\n\n```js\nimport expect from 'expect';\nimport injectStyledUtils from 'styled-components-test-utils/lib/expect';\n\ninjectStyledUtils(expect);\n\n// ...\n\nexpect(component).toHaveStyleRule(property, value);\n```\n\n### Chai\nTo use styled-components-test-utils with chai, you simply have to import the following:\n\n```js\nimport 'styled-components-test-utils/lib/chai';\n\n// ...\n\nexpect(component).toHaveStyleRule(property, value);\n```\n\n### Jasmine\nTo use styled-components-test-utils with jasmine, you have to do the following:\n\n```js\nimport injectStyledUtils from 'styled-components-test-utils/lib/jasmine';\n\ndescribe('test', () =\u003e {\n  beforeAll(() =\u003e {\n    injectStyledUtils(jasmine);\n  });\n\n  // ...\n\n  expect(component).toHaveStyleRule(property, value);\n\n  // ...\n});\n```\n\n## Api\nHere is the list of the available APIs. Please, note that in the examples we are using `react-test-renderer` but this library works also with `react-test-renderer/shallow` and `enzyme's shallow`, `enzyme's mount` is not supported yet.\n\n### toHaveStyleRule\n\u003e expect(tree).toHaveStyleRule(selector, value)\n\u003e\n\u003e expect({ component, modifier, media }).toHaveStyleRule(selector, value)\n\u003e\n\u003e expect({ css, props, modifier, media }).toHaveStyleRule(selector, value)\n\nAsserts that `tree`, `component` or `css` has a rule `selector: value;`. You can also pass some additional parameters to test selectors and media queries, here is an example:\n\n```js\nconst Button = styled.button`\n  color: blue;\n\n  \u0026:hover {\n    color: green;\n  }\n\n  @media screen and (max-width: 600px) {\n    \u0026:hover {\n      color: yellow;\n    }\n  }\n`;\nconst component = renderer.create(\u003cButton /\u003e);\nexpect(component).toHaveStyleRule('color', 'blue');\n\nexpect({\n  component,\n  modifier: '\u0026:hover', // works also with '\u003e span' or 'html.test \u0026' for example\n}).toHaveStyleRule('color', 'green');\n\nexpect({\n  component,\n  modifier: '\u0026:hover',\n  media: 'screen and (max-width: 600px)', // search rule in the given media\n}).toHaveStyleRule('color', 'yellow');\n\n// you can also pass to media an object that should be thought of\n// as if it is the current state of a device/browser.\n// a type value must be specified, and it can not be \"all\".\n// The returned rule is the one applied under those conditions\nexpect({\n  component,\n  modifier: '\u0026:hover',\n  media: {\n    type: 'screen',\n    width: '500px',\n  },\n}).toHaveStyleRule('color', 'yellow');\n\nconst style = css`\n  color: ${props =\u003e props.primary ? props.theme.primary : 'white'}\n`;\n\nexpect({\n  css: style,\n  props: {\n    theme: {\n      primary: 'purple',\n    },\n  },\n}).toHaveStyleRule('color', 'purple');\n```\n\n### toNotHaveStyleRule\n\u003e expect(tree).toNotHaveStyleRule(selector)\n\u003e\n\u003e expect({ component, modifier, media }).toNotHaveStyleRule(selector)\n\u003e\n\u003e expect({ css, props, modifier, media }).toNotHaveStyleRule(selector)\n\nAsserts that `tree`, `component` or `css` has no rule `selector: value;`. You can also pass some additional parameters to test selectors and media queries, as you can do with [toHaveStyleRule](#tohavestylerule), here is an example:\n\n```js\nconst Button = styled.button`\n  color: blue;\n`;\nconst component = renderer.create(\u003cButton /\u003e);\nexpect(component).toNotHaveStyleRule('background-color');\n```\n\n### toHaveKeyframeRule\n\u003e expect(keyframe).toHaveKeyframeRule(keyframeSelector, selector, value)\n\nAsserts that `keyframe` has a rule `selector: value;` contained in `keyframeSelector`.\n\n```js\nimport steps from './animationSteps';\n\nconst fadeIn = keyframes`\n  ${steps.map(step =\u003e `\n    ${step.perc}% {\n      opacity: ${step.opacity};\n    }\n  `).join('')}\n`;\n\nexpect(fadeIn).toHaveKeyframeRule('0%', 'opacity', '0');\nexpect(fadeIn).toHaveKeyframeRule('100%', 'opacity', '1');\n```\n\n### toHaveComponent\n\u003e expect(styledComponent).toHaveComponent(component)\n\nAsserts that `styledComponent` has component `component`.\n\n```js\nimport Foo from './Foo';\n\nconst Button = styled.button``;\nexpect(Button).toHaveComponent('button');\n\nconst Bar = Button.withComponent(Foo);\nexpect(Bar).toHaveComponent(Foo);\n```\n\n\n### toBeAGlobalStyle\n\u003e expect(style).toBeAGlobalStyle()\n\nAsserts that `style` is a global style.\n\n```js\nimport fontFamily from './fontFamily';\n\ninjectGlobal`\n  input {\n    font-family: ${fontFamily};\n  }\n`;\n\nexpect(`\n  input {\n    font-family: Roboto;\n  }\n`).toBeAGlobalStyle();\n```\n\n### toMatchSnapshot\n:warning: Jest only :warning:\n\u003e expect(tree).toMatchSnapshot()\n\nThis matcher is used to assert complex selectors or to test your entire component in one go.\n\n```js\nconst tree = renderer.create(\u003cMyComponent /\u003e).toJSON();\nexpect(tree).toMatchSnapshot();\n```\n\nIf you want to use it with enzyme you also need to install [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)\n\n```bash\nnpm install --save-dev enzyme-to-json\n```\n\nand use it as follows\n\n```js\nimport { shallow } from 'enzyme';\nimport toJSON from 'enzyme-to-json';\n\ntest('with enzyme', () =\u003e {\n  const wrapper = shallow(\u003cMyComponent /\u003e);\n  const tree = toJSON(wrapper);\n  expect(tree).toMatchSnapshot();\n})\n```\n\nor, you can enable it globally in your `package.json`:\n\n```json\n\"jest\": {\n  \"snapshotSerializers\": [\n    \"enzyme-to-json/serializer\"\n  ]\n}\n```\n\nand use it as follows\n\n```js\nimport { shallow } from 'enzyme';\n\ntest('with enzyme', () =\u003e {\n  const tree = shallow(\u003cMyComponent /\u003e);\n  expect(tree).toMatchSnapshot();\n})\n```\n\n## Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/).  \nEvery release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/styled-components-test-utils/releases) page.\n\n## Authors\n**Matteo Basso**\n- [github/mbasso](https://github.com/mbasso)\n- [@teo_basso](https://twitter.com/teo_basso)\n\n## Copyright and License\nCopyright for portions of project styled-components-test-utils are held by Michele Bertoli, 2017 as part of project jest-styled-components. All other copyright for project styled-components-test-utils are held by Matteo Basso.\n\nCopyright (c) 2017, Matteo Basso.\n\nstyled-components-test-utils source code is licensed under the [MIT License](https://github.com/mbasso/styled-components-test-utils/blob/master/LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Fstyled-components-test-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbasso%2Fstyled-components-test-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Fstyled-components-test-utils/lists"}