react-native-svg
react-native-svg copied to clipboard
feat: e2e snapshot tests
Summary
This PR adds E2E tests based on view screenshots done via react-native-view-shot
. It only works with devices that have their pixel ratio equal 3
. If you want to use device with different pixel ratio, you need to adjust it in e2e/generateReferences.ts
viewport and regenerate reference images (see below).
Steps to run tests:
- Run Metro server for example app via
yarn start
in example app's directory - Run
example
app on platform of your choice (currently only Android & iOS are supported) viayarn android
oryarn ios
in example app's directory - Run
yarn e2e
in project's root directory to start Jest server - Select
E2E
tab in example app - Wait for tests to finish
- You can see test results, as well as diffs (actual rendered svg vs reference image) in
e2e/diffs
directory
Steps to add new test cases:
- Put SVG of your choice to
e2e/cases
directory - Run
yarn generateE2eRefrences
, this will open headless chrome browser viapuppeteer
and snapshot all rendered SVGs to .png files and later use them as reference in tests - You should see new .png files in
e2e/references
- When you run E2E tests again, it will use new test case(s) you've added
Test Plan
https://github.com/software-mansion/react-native-svg/assets/41289688/24ee5447-ce9a-43b6-9dde-76229d25a30a
https://github.com/software-mansion/react-native-svg/assets/41289688/71d1873f-8155-4494-80bd-e4c1fa72a065
What's required for testing (prerequisites)?
See Summary
What are the steps to reproduce (after prerequisites)?
See Summary
Compatibility
OS | Implemented |
---|---|
iOS | ✅ |
Android | ✅ |
Web | ❌ |
Checklist
- [X] I have tested this on a device and a simulator
- [x] I added documentation in
README.md
- [X] I updated the typed files (typescript)
- [X] I added a test for the API in the
__tests__
folder