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",