{"id":17354042,"url":"https://github.com/icd2k3/jest-auto-snapshots","last_synced_at":"2025-04-14T21:51:59.852Z","repository":{"id":57280243,"uuid":"116594257","full_name":"icd2k3/jest-auto-snapshots","owner":"icd2k3","description":"Automated prop snapshot diffs for your React components","archived":false,"fork":false,"pushed_at":"2018-09-13T15:27:00.000Z","size":223,"stargazers_count":14,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T16:44:31.331Z","etag":null,"topics":["automated","jest","prop-types","react","snapshot","testing"],"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/icd2k3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-07T19:50:39.000Z","updated_at":"2022-09-27T11:01:34.000Z","dependencies_parsed_at":"2022-09-19T17:01:36.592Z","dependency_job_id":null,"html_url":"https://github.com/icd2k3/jest-auto-snapshots","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Fjest-auto-snapshots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Fjest-auto-snapshots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Fjest-auto-snapshots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Fjest-auto-snapshots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icd2k3","download_url":"https://codeload.github.com/icd2k3/jest-auto-snapshots/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248573734,"owners_count":21126892,"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":["automated","jest","prop-types","react","snapshot","testing"],"created_at":"2024-10-15T17:18:48.679Z","updated_at":"2025-04-14T21:51:59.816Z","avatar_url":"https://github.com/icd2k3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  Automatically generate prop fixtures and snapshot tests for your React components\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/icd2k3/jest-auto-snapshots\" target=\"_blank\"\u003e\u003cimg src=\"https://travis-ci.org/icd2k3/jest-auto-snapshots.svg?branch=master\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/icd2k3/jest-auto-snapshots?branch=master\" target=\"_blank\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/icd2k3/jest-auto-snapshots/badge.svg?branch=master\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/icd2k3/jest-auto-snapshots\" title=\"dependencies status\"\u003e\u003cimg src=\"https://david-dm.org/icd2k3/jest-auto-snapshots/status.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/icd2k3/jest-auto-snapshots?type=dev\" title=\"devDependencies status\"\u003e\u003cimg src=\"https://david-dm.org/icd2k3/jest-auto-snapshots/dev-status.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```js\nimport snap from 'jest-auto-snapshots';\nimport MyComponent from '../MyComponent';\n\nsnap(MyComponent, '../MyComponent.jsx');\n```\n\n↓\n\n```\n PASS  examples/MyComponent/__tests__/MyComponent.test.js\n  jest-auto-snapshots \u003e MyComponent\n    ✓ Matches snapshot when passed only required props (3ms)\n    ✓ Matches snapshot when passed all props (2ms)\n    ✓ Matches snapshot when boolean prop \"booleanProp\" is set to: \"false\" (1ms)\n```\n\n## Why?\n\u003e [Snapshot tests](https://facebook.github.io/jest/docs/en/snapshot-testing.html) are a very useful tool whenever you want to make sure your UI does not change unexpectedly.\n\n`jest` and `react-test-renderer` are fantastic tools, but writing tests for all the different possible rendering states and maintaining props is tedious. Really, we just want to know when \u0026 where a component snapshot changes and if that change was intentional.\n\nFor example, take the following simple component: `\u003cMyComponent active /\u003e`. In order to make sure `MyComponent` is fully covered in snapshot tests, we would have to write (and maintain) _two_ separate tests for the boolean `active` state.\n\n`jest-auto-snapshots` can detect the different prop types your component uses and _create_ those shapshot tests for you!\n\nIf `MyComponent`'s props ever get changed/added/removed `jest-auto-snapshots` will just create and run new snapshot tests.\n\nSee the bigger [example below](https://github.com/icd2k3/jest-auto-snapshots#example) for more info.\n\n#### What this does (or aspires to do):\n- Save you time when writing simple A -\u003e B rendering tests.\n- Automatically update, add, and remove snapshot tests when your component props change.\n- Ensure that all possible component rendering states are covered.\n\n#### What it doesn't do:\n- _Deeply_ test all prop possibilities nested in `arrays` or `shapes`. This would just create way to many snapshots and should be handled manually (or, better yet, strive to make your component props as flat as possible). I'm open to a settings option to allow for this in future iterations, though.\n- Test _functionality_ for you. You should still write manual tests for things like button clicks, component state changes, etc.\n- Save time _running_ tests. It's only supposed to save time _writing_ tests.\n\n## How\n  1. Finds and parses your component's source `.jsx` file with [react-docgen](https://github.com/reactjs/react-docgen).\n  2. Parses your `Component.propTypes` tree and checks for different conditions (required vs optional props, boolean props, etc).\n  3. Generates fixtures and tests based on the data above.\n\n#### Install\n`yarn add jest-auto-snapshots --dev`\nor\n`npm i jest-auto-snapshots --save-dev`\n\n## Example\n#### `MyComponent.jsx`\n```js\nconst MyComponent = ({ stringProp, booleanProp, nodeProp }) =\u003e (\n  \u003cdiv\u003e\n   {booleanProp \u0026\u0026 \u003cspan\u003eHello\u003c/span\u003e}\n   {stringProp}\n   {nodeProp}\n  \u003c/div\u003e\n);\n\nMyComponent.propTypes = {\n  booleanProp: PropTypes.bool,\n  stringProp: PropTypes.string,\n  nodeProp: PropTypes.node,\n};\n```\n\n#### `MyComponent.test.js`\n```js\nimport snap from 'jest-auto-snapshots';\nimport MyComponent from '../MyComponent';\n\nsnap(MyComponent, '../MyComponent.jsx');\n```\n\n#### `MyComponent.test.js.snap` (generated from the example code above)\n```js\n// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`when boolean prop \"booleanProp\" is set to: \"false\" 1`] = `\n\u003cdiv\u003e\n  jest-auto-snapshots String Fixture\n  \u003cNodeFixture /\u003e\n\u003c/div\u003e\n`;\n\nexports[`when passed all props 1`] = `\n\u003cdiv\u003e\n  \u003cspan\u003e\n    Hello\n  \u003c/span\u003e\n  jest-auto-snapshots String Fixture\n  \u003cNodeFixture /\u003e\n\u003c/div\u003e\n`;\n\nexports[`when passed only required props 1`] = `\n\u003cdiv\u003e\n  jest-auto-snapshots String Fixture\n\u003c/div\u003e\n`;\n```\n\n## More Examples\nFor more examples highlighting different use cases, please check out the [examples directory](https://github.com/icd2k3/jest-auto-snapshots/tree/master/examples)\n\n## API\n```js\nsnap(\n  component: \u003cComponent:required\u003e,\n  componentFilePath: \u003cString:required\u003e,  // jest-auto-snapshots needs to parse the component file itself to determine prop fixtures\n  config: \u003cObject:optional\u003e,             // optionally set fixtures for the component tests (see Config section below)\n);\n```\n\n## Config\nThere are 2 ways to change configuration for the script. Either at the root level in your [jest setup file](https://facebook.github.io/jest/docs/en/configuration.html#setupfiles-array) or in each individual test. The params are the same for both:\n\nKey | Description | Defaults\n--- | --- | ---\nfixturesByPropKey | Inject component prop fixtures bassed on the prop _key_ | None\nfixturesByPropType | Inject component prop fixtures based on the prop _type_ | [see src/configure.js](https://github.com/icd2k3/jest-auto-snapshots/blob/master/src/configure.js). By default it covers all the core [propTypes](https://github.com/facebook/prop-types).\n\n#### Set Config at the Root Level\nIn your [jest setup file](https://facebook.github.io/jest/docs/en/configuration.html#setupfiles-array):\n\n```js\nconst jestAutoSnapshots = require('jest-auto-snapshots');\n\njestAutoSnapshots.configure({\n  fixturesByPropType: {\n    customPropType: 'custom fixture',\n  },\n  fixturesByPropKey: {\n    user: { name: 'Joe', age: 30 },\n  },\n});\n```\n\nFor the above example:\n- `'custom fixture'` will be injected for _all_ components with `something: customPropType` in their `propTypes` object.\n- `{name: 'Joe', age: 30}` will be injected for _all_ components with `user: PropTypes.shape({ /* ... */ })` in their `propTypes` object.\n\n#### Set Config at the Test Level\nIn your test file:\n\n```js\nimport snap from 'jest-auto-snapshots';\nimport CustomProps from '../CustomProps';\n\nsnap(CustomProps, '../CustomProps.jsx', {\n  fixturesByPropType: {\n    customPropType: 'custom fixture',\n  },\n  fixturesByPropKey: {\n    user: { name: 'Joe', age: 30 },\n  },\n});\n```\n\nFor the above example, these custom fixtures will _only_ be injected for the current test.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficd2k3%2Fjest-auto-snapshots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficd2k3%2Fjest-auto-snapshots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficd2k3%2Fjest-auto-snapshots/lists"}