{"id":17259838,"url":"https://github.com/slavikdenis/storybook-react-native-vrt","last_synced_at":"2025-03-26T09:26:10.052Z","repository":{"id":216102870,"uuid":"727826018","full_name":"slavikdenis/storybook-react-native-vrt","owner":"slavikdenis","description":"Visual Regression Testing for React Native Storybook","archived":false,"fork":false,"pushed_at":"2024-02-14T08:49:28.000Z","size":19476,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T07:07:29.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/slavikdenis.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}},"created_at":"2023-12-05T16:48:01.000Z","updated_at":"2024-01-08T12:12:39.000Z","dependencies_parsed_at":"2024-02-06T16:08:33.524Z","dependency_job_id":null,"html_url":"https://github.com/slavikdenis/storybook-react-native-vrt","commit_stats":null,"previous_names":["slavikdenis/storybook-react-native-vrt"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavikdenis%2Fstorybook-react-native-vrt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavikdenis%2Fstorybook-react-native-vrt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavikdenis%2Fstorybook-react-native-vrt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavikdenis%2Fstorybook-react-native-vrt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slavikdenis","download_url":"https://codeload.github.com/slavikdenis/storybook-react-native-vrt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245624599,"owners_count":20645977,"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-15T07:46:17.907Z","updated_at":"2025-03-26T09:26:10.029Z","avatar_url":"https://github.com/slavikdenis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual Regression Testing for React Native/Expo and Storybook\n\nThe `react-native-storybook-visual` is a CLI tool for visual regression testing with Storybook in React Native/Expo for local development.\n\n![Showcase GIF](demo/showcase.gif)\n\n## Commands\n\n- `react-native-storybook-visual init`: Initialize visual regression testing in your app (generates folder structure, _.gitignore_ file and generates base screenshots)\n- `react-native-storybook-visual test`: Run visual regression tests against base screenshots\n- `react-native-storybook-visual update`: Update base screenshots with current screenshots\n\nFor more information, run `react-native-storybook-visual --help`.\n\n## Setup\n\n1. Setup `@storybook/react-native` in your app\n1. Install `@storybook/react-native-server` and create configuration for it. See guide [here](https://storybook.js.org/blog/storybook-for-react-native-6-5/#optional-server-configuration) and [here](https://dev.to/dannyhw/quick-guide-for-storybookreact-native-server-v6-4nl2) or check out the examples apps in the `apps` folder\n1. Install `react-native-storybook-visual` in your app\n1. Generate stories via `sb-rn-get-stories`\n1. Start up your app with Storybook\n1. Start up storybook server via `react-native-storybook-server` in your app\n1. Run `react-native-storybook-visual init` to initialize visual regression testing in your app\n\n## What's inside?\n\nThis Turborepo includes the following:\n\n### Packages\n\n- `react-native-storybook-visual`: CLI tools for visual regression testing with Storybook in React Native/Expo\n- `@tools/tsconfig`: shared `tsconfig.json`s used throughout the monorepo\n- `@tools/eslint-config`: ESLint presets\n- `@local/ui`: React Native UI components \u0026 stories for Storybook\n\n### Apps\n\n- `@apps/bare`: Bare React Native app with Storybook and visual regression testing setup\n- `@apps/expo`: Expo app with Storybook and visual regression testing setup\n\n### Useful commands in the repo root\n\n- `yarn build` - Build all packages\n- `yarn dev` - Develop all packages\n- `yarn lint` - Lint all packages\n- `yarn lint:ts` - Lint all packages with TypeScript\n- `yarn test` - Test all packages\n- `yarn format` - Format all packages\n- `yarn changeset` - Generate a changeset\n- `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)\n\n## Versioning and Publishing packages\n\nPackage publishing has been configured using [Changesets](https://github.com/changesets/changesets). Please review their [documentation](https://github.com/changesets/changesets#documentation) to familiarize yourself with the workflow.\n\nThis example comes with automated npm releases setup in a [GitHub Action](https://github.com/changesets/action). To get this working, you will need to create an `NPM_TOKEN` and `GITHUB_TOKEN` in your repository settings. You should also install the [Changesets bot](https://github.com/apps/changeset-bot) on your GitHub repository as well.\n\nFor more information about this automation, refer to the official [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md)\n\n## Roadmap\n\n- Configurable options / Configuration file\n\t- [ ] Device list\n\t- [ ] Storybook folder path\n\t- [ ] Storybook Server configuration (host, port, secure, etc.)\n\t- [ ] Tests folder path\n\t- [ ] React Native / Expo packager port\n\t- [ ] [`looks-same` configuration](https://github.com/gemini-testing/looks-same?tab=readme-ov-file#building-diff-image)\n- [ ] Watch mode\n- [ ] Disable hot reload on startup\n- [ ] Manage Expo/React Native apps (create, run, etc.)\n- [ ] Caching tests\n- [ ] Support light/dark variants\n- [ ] CI support\n\n## Inspiration\n\n- [Creating Design Systems in React Native - Marek Fořt | React Native EU 2023](https://www.youtube.com/watch?v=jKhLWl1MX5s)\n- [Daniel Williams' example of VRT on Storybook](https://twitter.com/Danny_H_W/status/1662835533217669121)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavikdenis%2Fstorybook-react-native-vrt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslavikdenis%2Fstorybook-react-native-vrt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavikdenis%2Fstorybook-react-native-vrt/lists"}