{"id":13809329,"url":"https://github.com/fwouts/react-screenshot-test","last_synced_at":"2025-05-16T11:06:33.126Z","repository":{"id":38290603,"uuid":"217224844","full_name":"fwouts/react-screenshot-test","owner":"fwouts","description":"A dead simple library to screenshot test React components","archived":false,"fork":false,"pushed_at":"2023-04-10T23:33:46.000Z","size":5261,"stargazers_count":618,"open_issues_count":1,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-09T22:24:20.596Z","etag":null,"topics":["jest","react","screenshot","testing","visual-regression"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-screenshot-test","language":"TypeScript","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/fwouts.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":"docs/supporting-css.md","governance":null,"roadmap":null,"authors":null}},"created_at":"2019-10-24T06:14:54.000Z","updated_at":"2025-04-28T00:12:28.000Z","dependencies_parsed_at":"2024-01-08T08:03:38.248Z","dependency_job_id":null,"html_url":"https://github.com/fwouts/react-screenshot-test","commit_stats":{"total_commits":412,"total_committers":7,"mean_commits":"58.857142857142854","dds":"0.49514563106796117","last_synced_commit":"410c9f3612fafa9367d31d37ad28ef717c4ba600"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwouts%2Freact-screenshot-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwouts%2Freact-screenshot-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwouts%2Freact-screenshot-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwouts%2Freact-screenshot-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fwouts","download_url":"https://codeload.github.com/fwouts/react-screenshot-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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":["jest","react","screenshot","testing","visual-regression"],"created_at":"2024-08-04T01:02:18.657Z","updated_at":"2025-05-16T11:06:28.116Z","avatar_url":"https://github.com/fwouts.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003e **Warning**\n\u003e\n\u003e This package is no longer actively maintained.\n\u003e\n\u003e Check out [@previewjs/screenshot](https://github.com/fwouts/previewjs/tree/main/screenshot) for an alternative.\n\n# React Screenshot Test\n\n[![Logo](brand/logo.png)](https://www.npmjs.com/package/react-screenshot-test)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/fwouts/react-screenshot-test/tree/master\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/fwouts/react-screenshot-test.svg?style=shield\" alt=\"CircleCI\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-screenshot-test\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/react-screenshot-test.svg\" alt=\"npm\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-screenshot-test\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/react-screenshot-test.svg\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-screenshot-test\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/react-screenshot-test.svg\" alt=\"license\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\nHere is a screenshot test written with `react-screenshot-test`:\n\n[![Code example](example-code.png)](https://github.com/fwouts/react-screenshot-test/tree/master/example/FancyButton.screenshot.jsx)\n\nAll you need is to install `react-screenshot-test` and configure Jest:\n\n```js\n// jest.screenshot.config.js\n\nmodule.exports = {\n  testEnvironment: \"node\",\n  globalSetup: \"react-screenshot-test/global-setup\",\n  globalTeardown: \"react-screenshot-test/global-teardown\",\n  testMatch: [\"**/?(*.)+(screenshot).[jt]s?(x)\"],\n  transform: {\n    \"^.+\\\\.[t|j]sx?$\": \"babel-jest\", // or ts-jest\n    \"^.+\\\\.module\\\\.css$\": \"react-screenshot-test/css-modules-transform\",\n    \"^.+\\\\.css$\": \"react-screenshot-test/css-transform\",\n    \"^.+\\\\.scss$\": \"react-screenshot-test/sass-transform\",\n    \"^.+\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$\":\n      \"react-screenshot-test/asset-transform\"\n  },\n  transformIgnorePatterns: [\"node_modules/.+\\\\.js\"]\n};\n```\n\nYou can then generate screenshots with `jest -c jest.screenshot.config.js -u`,\njust like you would with Jest snapshots.\n\n## What does it look like?\n\nHere's a [real example](https://github.com/fwouts/react-screenshot-test/pull/18/files?short_path=9fa0253#diff-9fa0253d6c3a2b1cf8ec498eec18360e) of a pull request where a component was changed:\n[![Example PR](example-pr.png)](https://github.com/fwouts/react-screenshot-test/pull/18/files?short_path=c1101dd#diff-c1101ddb11729f8ee0750df5e9595b47)\n\n## How does it work?\n\nUnder the hood, we start a local server which renders components server-side. Each component is given its own dedicated page (e.g. /render/my-component). Then we use Puppeteer to take a screenshot of that page.\n\nCurious to learn more? Check out the [internal documentation](./docs/index.md)!\n\n## Cross-platform consistency\n\nIf you work on a team where developers use a different OS (e.g. Mac OS and\nLinux), or if you develop on Mac OS but use Linux for continuous integration,\nyou would quickly run into issues where screenshots are inconsistent across\nplatforms. This is, for better or worse, expected behaviour.\n\nIn order to work around this issue, `react-screenshot-test` will default to\nrunning Puppeteer (i.e. Chrome) inside Docker to take screenshots of your\ncomponents. This ensures that generated screenshots are consistent regardless of\nwhich platform you run your tests on.\n\nYou can override this behaviour by setting the `SCREENSHOT_MODE` environment\nvariable to `local`, which will always use a local browser instead of Docker.\n\n_Note: On Linux, `react-screenshot-test` will run Docker using host network mode on port 3001_\n\n## CSS support\n\nCSS-in-JS libraries such as Emotion and Styled Components are supported.\n\n| CSS technique                                          | Supported |\n| ------------------------------------------------------ | --------- |\n| `\u003cdiv style={...}`                                     | ✅        |\n| CSS stylesheets \u003cbr\u003e`import \"./style.css\"`             | ✅        |\n| Sass stylesheets\u003cbr\u003e`import \"./style.scss\"`            | ✅        |\n| CSS Modules\u003cbr\u003e`import css from \"./style.css\"`         | ✅        |\n| [Emotion](https://emotion.sh)                          | ✅        |\n| [Styled Components](https://www.styled-components.com) | ✅        |\n\n## Usage with create-react-app\n\nIf you'd like to set up `react-screenshot-test` with a `create-react-app`, [here is everything you need](https://github.com/fwouts/react-screenshot-test-with-create-react-app/compare/original...master).\n\n## Storing image snapshots\n\nWe recommend using [Git LFS](https://git-lfs.github.com) to store image\nsnapshots. This will help prevent your Git repository from becoming bloated over time.\n\nIf you're unfamiliar with Git LFS, you can learn about it with [this short video (2 min)](https://www.youtube.com/watch?v=uLR1RNqJ1Mw) and/or going through [the official tutorial](https://github.com/git-lfs/git-lfs/wiki/Tutorial).\n\nTo set up Git LFS, [install the Git extension](https://git-lfs.github.com/) and add the following to `.gitattributes` in your repository ([source](https://github.com/americanexpress/jest-image-snapshot/issues/92#issuecomment-493582776)):\n\n```\n**/__screenshots__/*.* binary\n**/__screenshots__/*.* filter=lfs diff=lfs merge=lfs -text\n```\n\nYou may also need to set up Git LFS for continuous integration. See [our config](https://github.com/fwouts/react-screenshot-test/blob/master/.circleci/config.yml) for an example with CircleCI.\n\n## Usage with Percy\n\nIf you prefer to keep image snapshots out of your repository, you can use a third-party service such as [Percy](https://percy.io):\n\n- Install `@percy/puppeteer`\n- Ensure that `PERCY_TOKEN` is set in your enviroment\n- Set up a script to invoke Jest through Percy:\n\n```json\n{\n  \"screenshot-test-percy\": \"SCREENSHOT_MODE=percy percy exec -- jest -c jest.screenshot.config.js\"\n}\n```\n\n## TypeScript support\n\nThis library is written in TypeScript. All declarations are included.\n\n## Browser support\n\nAt the moment, screenshots are only generated with Chrome. However, the design can be extended to any headless browser. File an issue if you'd like to help make this happen.\n\n## Comparison\n\n| Tool                                                                         | Visual | Open Source | Price for 100,000 snapshots/month | Jest integration | Review process                                                         |\n| ---------------------------------------------------------------------------- | ------ | ----------- | --------------------------------- | ---------------- | ---------------------------------------------------------------------- |\n| [react-screenshot-test](https://www.npmjs.com/package/react-screenshot-test) | ✅     | ✅          | Free                              | ✅               | Pull request                                                           |\n| [Jest snapshots](https://jestjs.io/docs/en/snapshot-testing)                 | ❌     | ✅          | Free                              | ✅               | Pull request                                                           |\n| [Percy](https://percy.io)                                                    | ✅     | ❌          | [\\$469](https://percy.io/pricing) | ❌               | Separate UI                                                            |  |\n| [storycap](https://github.com/reg-viz/storycap)                              | ✅     | ✅          | Free                              | ❌               | Implicit approval with [reg-suit](https://github.com/reg-viz/reg-suit) |\n\n## Reporting issues\n\nIf something doesn't work, or if the documentation is unclear, please do not hesitate to [raise an issue](https://github.com/fwouts/react-screenshot-test/issues)!\n\nIf it doesn't work for you, it probably doesn't work for others either 🙃\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwouts%2Freact-screenshot-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffwouts%2Freact-screenshot-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwouts%2Freact-screenshot-test/lists"}