Skip to content

docs: improve readme #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicodeck merged 2 commits into from
Oct 10, 2025
Merged

docs: improve readme #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c62181
chore: update yarn version
nicodeck Oct 10, 2025
03bd1d3
docs: improve readme
nicodeck Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(<MyComponent />);
Expand All @@ -65,13 +68,19 @@ it('should match visual snapshot', async () => {
});
```

In this test:

- `render(<MyComponent />)` 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({
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down