feat: e2e snapshot tests

.github/workflows/android-e2e.yml

@@ -0,0 +1,120 @@
+name: Test Android e2e
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/android-e2e-test.yml'
+      - 'apps/examples/**'
+      - 'example/**'
+      - 'android/**'
+      - 'src/**'
+      - 'e2e/**'
+      - 'package.json'
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: macos-12
+    timeout-minutes: 60
+    env:
+      WORKING_DIRECTORY: example
+      API_LEVEL: 34
+      SYSTEM_IMAGES: system-images;android-34;google_apis;x86_64
+      AVD_NAME: rn-svg-avd
+    concurrency:
+      group: android-e2e-example-${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+      - name: Set up JDK 17
+        uses: actions/setup-java@v2
+        with:
+          java-version: '17'
+          distribution: 'zulu'
+          cache: 'gradle'
+      - name: Install NDK
+        uses: nttld/setup-ndk@v1
+        id: setup-ndk
+        with:
+          ndk-version: r26d
+          local-cache: true
+      - name: Set ANDROID_NDK
+        run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV
+      - name: Cache SDK image
+        id: cache-sdk-img
+        uses: actions/cache@v3
+        with:
+          path: $ANDROID_HOME/system-images/
+          key: ${{ runner.os }}-build-system-images-${{ env.SYSTEM_IMAGES }}
+      - name: SKDs - download required images
+        if: ${{ steps.cache-sdd-img.outputs.cache-hit != 'true' }}
+        run: $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager "system-images;android-34;google_apis;x86_64"
+      - name: Cache AVD
+        id: cache-avd
+        uses: actions/cache@v3
+        with:
+          path: ~/.android/avd/${{ env.AVD_NAME }}.avd
+          key: ${{ runner.os }}-avd-images-${{ env.SYSTEM_IMAGES }}-${{ env.AVD_NAME }}
+      - name: Emulator - Create
+        if: ${{ steps.cache-avd.outputs.cache-hit != 'true' }}
+        run: $ANDROID_HOME/cmdline-tools/latest/bin/avdmanager create avd -n ${{ env.AVD_NAME }} --device 28 --package "${{ env.SYSTEM_IMAGES }}" --sdcard 512M
+      - name: Emulator - Set screen settings
+        if: ${{ steps.cache-avd.outputs.cache-hit != 'true' }}
+        run: |
+          echo "AVD config path: $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini"
+          sed -i '' 's/.*hw\.lcd\.density.*/hw\.lcd\.density = 480/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
+          sed -i '' 's/.*hw\.lcd\.width.*/hw\.lcd\.width = 1344/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
+          sed -i '' 's/.*hw\.lcd\.height.*/hw\.lcd\.height = 2992/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
+      - name: Emulator - Boot
+        run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd ${{ env.AVD_NAME }} -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim &
+
+      - name: ADB Wait For Device
+        run: adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed) ]]; do sleep 1; done;'
+        timeout-minutes: 10
+
+      - name: Reverse TCP
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: adb devices | grep '\t' | awk '{print $1}' | sed 's/\\s//g' | xargs -I {} adb -s {} reverse tcp:8081 tcp:8081
+
+      - name: Install root node dependencies
+        run: yarn
+
+      - name: Install example app node dependencies
+        run: yarn
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+
+      - name: Build Android app
+        working-directory: ${{ env.WORKING_DIRECTORY }}/android
+        run: ./gradlew assembleDebug
+
+      - name: Start Metro server
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: E2E=true yarn start &> output.log &
+
+      - name: Install APK
+        run: adb install -r ${{ env.WORKING_DIRECTORY }}/android/app/build/outputs/apk/debug/app-debug.apk
+
+      - name: Launch APK
+        run: 'while ! (adb shell monkey -p com.example 1 | grep -q "Events injected: 1"); do sleep 1; echo "Retrying due to errors in previous run..."; done'
+
+      - name: Run e2e Tests
+        run: E2E=true yarn e2e
+
+      - name: Upload test report
+        uses: actions/upload-artifact@v4
+        with:
+          name: report
+          path: |
+            report.html
+            jest-html-reporters-attach/
+
+      - name: Kill emulator (so it can be cached safely)
+        run: adb devices | grep emulator | cut -f1 | while read line; do adb -s $line emu kill; done

.github/workflows/ios-e2e.yml

@@ -0,0 +1,93 @@
+name: Test iOS e2e
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/android-e2e-test.yml'
+      - 'apps/examples/**'
+      - 'example/**'
+      - 'apple/**'
+      - 'src/**'
+      - 'e2e/**'
+      - 'package.json'
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: macos-14
+    timeout-minutes: 60
+    env:
+      WORKING_DIRECTORY: example
+      DEVICE: iPhone 14 Pro
+      XCODE_VERSION: latest-stable
+    concurrency:
+      group: ios-e2e-example-${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - name: Use latest stable Xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: ${{ env.XCODE_VERSION }}
+
+      - name: Restore react-native-svg node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-svg-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-node-modules-svg-
+
+      - name: Install react-native-svg node_modules
+        run: yarn install --frozen-lockfile
+
+      - name: Restore app node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.WORKING_DIRECTORY }}/node_modules
+          key: ${{ runner.os }}-node-modules-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/yarn.lock', env.WORKING_DIRECTORY)) }}
+          restore-keys: ${{ runner.os }}-node-modules-${{ env.WORKING_DIRECTORY }}-
+
+      - name: Install app node_modules
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn install --frozen-lockfile
+
+      - name: Restore Pods from cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            ${{ env.WORKING_DIRECTORY }}/ios/Pods
+            ~/Library/Caches/CocoaPods
+            ~/.cocoapods
+          key: ${{ runner.os }}-pods-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/ios/Podfile.lock', env.WORKING_DIRECTORY)) }}
+
+      - name: Install Pods
+        working-directory: ${{ env.WORKING_DIRECTORY }}/ios
+        run: pod install
+
+      - name: Restore build artifacts from cache
+        uses: actions/cache@v3
+        with:
+          path: ~/Library/Developer/Xcode/DerivedData
+          key: ${{ runner.os }}-ios-derived-data-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/ios/Podfile.lock', env.WORKING_DIRECTORY)) }}
+      - name: Start Metro server
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: E2E=true yarn start &> output.log &
+
+      - name: Build app
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: E2E=true npx react-native@latest run-ios --simulator="${{ env.DEVICE }}" --mode Debug --verbose
+
+      - name: Run e2e Tests
+        run: E2E=true yarn e2e
+
+      - name: Upload test report
+        uses: actions/upload-artifact@v4
+        with:
+          name: report
+          path: |
+            report.html
+            jest-html-reporters-attach/

.gitignore

@@ -50,3 +50,6 @@ experimental/
 
 # VS Code
 .vscode/
+
+jest-html-reporters-attach/
+report.html

CONTRIBUTING.md

@@ -1,7 +1,8 @@
 # Contributing to React Native Svg
 
 Thank you for helping out with react-native-svg!
-We'd like to make contributions as pleasant as possible, so here's a small guide of how we see it. Happy to hear your feedback about anything, so please let us know.
+We'd like to make contributions as pleasant as possible, so here's a small guide of how we see it. Happy to hear your
+feedback about anything, so please let us know.
 
 ### Modifying react-native-svg
 
@@ -13,24 +14,51 @@ We'd like to make contributions as pleasant as possible, so here's a small guide
 
 ### Testing your changes
 
-Add test example in [tests-example](https://github.com/react-native-svg/react-native-svg/tree/main/tests-example) concerning your change following the convention of `TestX.tsx` where `X` is your PR number.
+Add test example in [tests-example](https://github.com/react-native-svg/react-native-svg/tree/main/tests-example)
+concerning your change following the convention of `TestX.tsx` where `X` is your PR number.
 
 ## Tests
 
-We use `typescript` for type checks, `eslint` with `prettier` for linting/formatting. All tests are run by github actions for all opened pull requests.
+We use `typescript` for type checks, `eslint` with `prettier` for linting/formatting. All tests are run by github
+actions for all opened pull requests.
 
 - `yarn test`: Run all tests, except for e2e (see note below).
 - `yarn lint`: Run `eslint` check.
 - `yarn tsc`: Run `typescript` check.
 - `yarn jest`: Run `jest` type check.
+- `yarn e2e`: Run E2E tests (see section below)
 
-Currently e2e tests exist here: https://github.com/msand/react-native-svg-e2e/
+### Running E2E tests:
+
+> [!WARNING]  
+> Reference images in this repository are generated with [pixel ratio](https://reactnative.dev/docs/pixelratio) = `3`.
+> Make sure to run tests on a device that also has pixel ratio equal 3. Otherwise tests will fail.
+> In order to use device with different pixel ratio, adjust it in `e2e/generateRefereces.ts` viewport and regenerate
+> references.
+
+1. Navigate to the example application's directory and initiate the Metro server using the yarn start command.
+2. To run the example application on your preferred platform (note: currently only Android and iOS are supported),
+   execute the command `yarn android` or `yarn ios` within the example app's directory.
+3. Start the Jest server by running `yarn e2e` in the project's root directory.
+4. In the example application, select the E2E tab.
+5. Allow the tests to complete.
+6. The test results, along with any differences (i.e. the actual rendered svg versus the reference image), can be viewed
+   in the `e2e/diffs` directory.
+
+### To add new E2E test cases, proceed as follows:
+
+1. Put an SVG file of your selection into the `e2e/cases` directory.
+2. Execute `yarn generateE2eRefrences`. This action launches a headless Chrome browser via Puppeteer, capturing
+   snapshots of all rendered SVGs as .png files. These files will serve as a reference during testing.
+3. Check the `e2e/references` directory to observe newly created .png files.
+4. When you rerun the E2E tests, the new test case(s) you've added will be incorporated.
 
 ## Sending a pull request
 
 When you're sending a pull request:
 
-- Communication is a key. If you want fix/add something, please consider either opening a new issue or finding an existing one so we can further discuss it.
+- Communication is a key. If you want fix/add something, please consider either opening a new issue or finding an
+  existing one so we can further discuss it.
 - We prefer small pull requests focused on one change, as those are easier to test/check.
 - Please make sure that all tests are passing on your local machine.
 - Follow the template when opening a PR.
@@ -43,7 +71,8 @@ Most notably prefixes you'll see:
 
 - **fix**: Bug fixes
 - **feat**: New feature implemented
-- **chore**: Changes that are not affecting end user (CI config changes, scripts, ["grunt work"](https://stackoverflow.com/a/26944812/3510245))
+- **chore**: Changes that are not affecting end user (CI config changes,
+  scripts, ["grunt work"](https://stackoverflow.com/a/26944812/3510245))
 - **docs**: Documentation changes.
 - **perf**: A code change that improves performance.
 - **refactor**: A code change that neither fixes a bug nor adds a feature.
@@ -55,7 +84,8 @@ We use [release-it](https://github.com/release-it/release-it) to release new ver
 
 ## Reporting issues
 
-You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-svg/issues). Please search for existing issues and follow the issue template when opening one.
+You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-svg/issues). Please
+search for existing issues and follow the issue template when opening one.
 
 ## License
 

apps/examples/App.tsx

@@ -20,6 +20,7 @@ import {Svg, Circle, Line} from 'react-native-svg';
 
 import * as examples from './src/examples';
 import {commonStyles} from './src/commonStyles';
+import {E2E} from './src/examples';
 
 const names: (keyof typeof examples)[] = [
   'Svg',
@@ -43,6 +44,7 @@ const names: (keyof typeof examples)[] = [
   'Transforms',
   'Markers',
   'Mask',
+  'E2E',
   'Filters',
   'FilterImage',
 ];
@@ -132,6 +134,13 @@ export default class SvgExample extends Component {
   );
 
   render() {
+    if (process.env.E2E) {
+      console.log(
+        'Opening E2E example, as E2E env is set to ' + process.env.E2E,
+      );
+      const e2eTab = React.createElement(E2E.samples[0]);
+      return <SafeAreaView>{e2eTab}</SafeAreaView>;
+    }
     return (
       <SafeAreaView style={styles.container}>
         <Text style={commonStyles.welcome}>SVG library for React Apps</Text>