GitHub Action
Run Sherlo
Welcome to the Sherlo Monorepo, your comprehensive solution for integrating visual testing into your React Native projects. Sherlo streamlines the visual testing process, offering seamless integration with Storybook for React Native, automation through a CLI tool, and GitHub Actions for CI/CD pipelines.
To integrate Sherlo with your React Native app and run tests via CLI or GitHub Actions, ensure you follow these steps:
- Ensure you have Storybook for React Native configured in your project. Sherlo requires Storybook version
>=7.6.15
. Sherlo integrates with Storybook but does not operate independently.
-
Install
@sherlo/react-native-storybook
to enable Sherlo's visual testing with Storybook in your React Native application.yarn add @sherlo/react-native-storybook
-
Wrap Your Application with
withStorybook
to toggle between your app and Storybook based on Sherlo's testing environment.// App.tsx import { withStorybook } from '@sherlo/react-native-storybook'; import StorybookUIRoot from './.storybook'; export default withStorybook(AppRoot, StorybookUIRoot);
-
Configure Storybook with
withSherlo
for development or testing modes, enabling control over the testing process.// .storybook/index.tsx import { withSherlo } from '@sherlo/react-native-storybook'; import StorybookUI from './storybook'; export default withSherlo(StorybookUI, { /* Configuration options */ });
-
Obtain a Project Token by signing up for early access at Sherlo.io.
-
Set Up Your Configuration File, specifying your project token, devices, and app information.
// sherlo.config.ts import { Config } from '@sherlo/react-native-storybook'; const config: Config = { projectToken: 'your_project_token_here', android: { path: 'path/to/android/app.apk', packageName: 'com.yourapp.package', devices: [ /* Your Android Devices Here */ ], }, ios: { path: 'path/to/ios/app.tar.gz', bundleIdentifier: 'your.ios.bundle.identifier', devices: [ /* Your iOS Devices Here */ ], }, }; export default config;
-
Manually with CLI: Install
@sherlo/cli
and run it in your project directory to upload builds and start tests.yarn global add @sherlo/cli npx @sherlo/cli
-
Automate with GitHub Actions: Use
@sherlo/sherlo-action
in your.github/workflows
to automate the testing process in your CI/CD pipeline.
- @sherlo/react-native-storybook: Integrate Storybook with Sherlo for React Native apps.
- @sherlo/cli: CLI tool for uploading builds and initiating tests.
- @sherlo/action: GitHub Action for automating visual testing workflows.
- @sherlo/expo-example: Fully configured example showcasing integration in an Expo project.
Contributions are welcome! Please fork the repository, make your changes, and submit a pull request. For major changes, open an issue first to discuss what you would like to change.
Sherlo is released under the MIT License. See the LICENSE file in each package for more details.