{"id":16181784,"url":"https://github.com/ericclemmons/jest-storybook","last_synced_at":"2025-03-19T01:31:16.485Z","repository":{"id":66108031,"uuid":"75503314","full_name":"ericclemmons/jest-storybook","owner":"ericclemmons","description":"Generate Jest snapshots from existing storybooks (similar to storyshots).","archived":false,"fork":false,"pushed_at":"2017-05-15T19:05:24.000Z","size":356,"stargazers_count":13,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T19:03:20.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/ericclemmons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2016-12-03T22:13:01.000Z","updated_at":"2020-06-12T14:00:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"3cb6c2bf-0fda-4748-a136-f5276f6081e8","html_url":"https://github.com/ericclemmons/jest-storybook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fjest-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fjest-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fjest-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fjest-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericclemmons","download_url":"https://codeload.github.com/ericclemmons/jest-storybook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960361,"owners_count":20375102,"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":[],"created_at":"2024-10-10T06:27:40.369Z","updated_at":"2025-03-19T01:31:16.466Z","avatar_url":"https://github.com/ericclemmons.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jest-storybook\n\n\u003e Generate [Jest][jest] snapshots from existing [storybooks][storybook]\n\u003e (similar to `storyshots`).\n\n_Note: this isn't a library, but a set of instructions + code to do this yourself.\nIf a wortwhile abstraction arises, I'll publish it accordingly._\n\n### Rationale\n\n![Stories](/storybook.png)\n\n[Storybook][storybook] is an **extremely powerful \u0026 productive** way to build\nReact components.  They're _effectively tests_, so it makes sense to version\nthem along with the rest of your test-suite.\n\n[Storyshots][storyshots] are [Kadira][kadira]'s answer to this, but don't use\n[Jest][jest] under the hood, so you miss out on\n[Jest's mocking capabilities](https://github.com/storybooks/storyshots/issues/38).\n\nLuckily, **it's fairly trivial for [Jest][jest] to snapshot stories itself**.\n\n### How To Snapshot Stories\n\n1. [Install Jest](https://facebook.github.io/jest/#getting-started).\n\n  ```shell\n  yarn add --dev jest\n  # or\n  npm install --save-dev jest\n  ```\n\n2. [Add React support to Jest](https://facebook.github.io/jest/docs/tutorial-react.html).\n\n  ```shell\n  yarn add --dev babel-jest react-test-renderer\n  # or\n  npm install --save-dev babel-jest react-test-renderer\n  ```\n\n3. Modify your `package.json` `scripts.test` to run `jest`:\n\n  ```json\n  {\n    \"test\": \"jest --config .jestrc\"\n  }\n  ```\n\n  _Note: [`.jestrc` may be implicitly used in the future](https://github.com/facebook/jest/issues/2203#issuecomment-264292645)._\n\n4. Mock out non-JS files (e.g. `.css`) \u0026 `@kadira/storybook` in `.jestrc`:\n\n  ```json\n  {\n    \"moduleNameMapper\": {\n      \"\\\\.(css)$\": \"\u003crootDir\u003e/__mocks__/.$1.js\",\n      \"^@kadira/storybook$\": \"\u003crootDir\u003e/__mocks__/@kadira/storybook\"\n    }\n  }\n  ```\n\n  Libraries like `react-codemirror` require `import`ing CSS files, which will\n  throw exceptions within Jest.\n\n  If you're using CSS Modules, consider [identity-obj-proxy][identity-obj-proxy],\n  which will let you easily reference properties (e.g. `styles.foo`).\n\n  _Note: Until [facebook/jest#1774](https://github.com/facebook/jest/issues/1774) \u0026 [facebook/jest#462](https://github.com/facebook/jest/issues/462) are resolved,\n  **namespaced mock packages must be explicitly listed**._\n\n5. Create `__mocks__/.css.js`:\n\n  ```js\n  module.exports = __filename.replace(process.cwd(), \"~\");\n  ```\n\n  CSS files are replaced with their _relative_ path, so tests don't break in CI.\n\n6. Create `__mocks__/@kadira/storybook.js`:\n\n  ```js\n  import renderer from \"react-test-renderer\";\n\n  // Mocked version of `import { action } from \"@kadira/storybook\"`.\n  export const action = (actionName) =\u003e jest.fn();\n\n  // Mocked version of `import { storiesOf } from \"@kadira/storybook\"`.\n  export const storiesOf = (groupName) =\u003e {\n    // Mocked API to generate tests from \u0026 snapshot stories.\n    const api = {\n      add(storyName, story) {\n        describe(groupName, () =\u003e {\n          it(storyName, () =\u003e {\n            const component = renderer.create(story());\n\n            expect(component.toJSON()).toMatchSnapshot();\n          });\n        });\n\n        return api;\n      },\n\n      // Any `storybook-addon-*` packages may require noop-ing them:\n      addDecorator() {\n        return api;\n      },\n    };\n\n    return api;\n  };\n  ```\n\n  _Note: Once [facebook/jest#2094](https://github.com/facebook/jest/pull/2094) is released, you can customize snapshot names!_\n\n7. Move `*.stories.js` Under `__tests__`.\n\n  ```diff\n  diff --git a/example/components/PrettyCode/index.stories.js b/example/components/PrettyCode/__tests__/index.stories.js\n  similarity index 97%\n  rename from example/components/PrettyCode/index.stories.js\n  rename to example/components/PrettyCode/__tests__/index.stories.js\n  index 4e348a6..1b83680 100644\n  --- a/example/components/PrettyCode/index.stories.js\n  +++ b/example/components/PrettyCode/__tests__/index.stories.js\n  ```\n\n  Jest will automatically discover \u0026 run any `.js` files under `__tests__`.\n\n8. Run Tests.\n\n  ![Passing tests](/jest.png)\n\n---\n\n### Running This Example\n\n1. Clone this project.\n2. `yarn` or `npm install`.\n3. `npm start` (\u003chttp://localhost/3000\u003e) or run `npm test`.\n\n[jest]: https://facebook.github.io/jest/\n[kadira]: https://github.com/kadirahq/\n[identity-obj-proxy]: https://github.com/keyanzhang/identity-obj-proxy\n[storybook]: https://github.com/storybooks/react-storybook\n[storyshots]: https://github.com/storybooks/storyshots\n\n\n### License\n\n\u003e MIT License 2016 © Eric Clemmons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fjest-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericclemmons%2Fjest-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fjest-storybook/lists"}