diff --git a/README.md b/README.md index cdbc7b7..7f71092 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,8 @@ Then you can install `@bam.tech/react-native-radiant`: yarn add --dev @bam.tech/react-native-radiant ``` +⚠️ To run radiant tests, you need a package to handle and compare images. We recommend using `jest-image-snapshot`, see below for implementation details. + ### Configuration #### Log levels @@ -57,6 +59,7 @@ This is what a visual snapshot test looks like: ```javascript import { render, screen } from '@testing-library/react-native'; +import { getVisualSnapshot } from '@bam.tech/react-native-radiant'; it('should match visual snapshot', async () => { render(); @@ -65,13 +68,19 @@ it('should match visual snapshot', async () => { }); ``` +In this test: + +- `render()` renders the component and makes it available in `screen` from `@testing-library/react-native` +- `await getVisualSnapshot(screen)` creates the screenshot using `@bam.tech/react-native-radiant` +- `expect(...).toMatchImageSnapshot()` relies on `jest` + `jest-image-snapshot` to store the new image and compare it with the previous one + Then run `yarn jest` to generate the snapshots. The snapshots should be stored in the `__image_snapshots__` folder in your Jest test folder. ### Threshold -You can set a threshold for the visual snapshots using jest-image-snapshot options, in your Jest setup after env file: +You can set a threshold for the visual snapshots using jest-image-snapshot options, in your Jest setup _after env_ file: ```javascript const toMatchImageSnapshot = configureToMatchImageSnapshot({ @@ -82,6 +91,8 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({ expect.extend({ toMatchImageSnapshot }); ``` +⚠️ This setup has to be in your Jest setup _after env_ file, or else expect will not be recognized as part of the environment. + If you need to set a different threshold in different environments (local vs CI for example), you can use environment variables to do so: ```javascript diff --git a/package.json b/package.json index bcdd273..b637e16 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "lib:publish": "yarn workspace @bam.tech/react-native-radiant lib:publish", "lint": "eslint 'packages/**'" }, - "packageManager": "yarn@4.6.0", + "packageManager": "yarn@4.10.3", "devDependencies": { "@eslint/js": "^9.19.0", "eslint": "^9.19.0",