feat: e2e snapshot tests (#2338)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->

# 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](https://reactnative.dev/docs/pixelratio) 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) via `yarn android` or `yarn 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 via `puppeteer` 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



<!-- Check completed item, when applicable, via: [X] -->

- [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

---------

Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>

__tests__/e2e/GeneralSvgRenderingTest.spec.tsx

@@ -0,0 +1,94 @@
+import { SvgFromXml } from 'react-native-svg';
+import * as fs from 'node:fs';
+import { compareImages, sendToDeviceAndReceive } from '../../e2e/helpers';
+import { HandshakeMessageData, RenderResponse } from '../../e2e/types';
+import path from 'path';
+import {
+  addAttach as attachImageToReport,
+  addMsg as addMessageToReport,
+} from 'jest-html-reporters/helper';
+import { PNG } from 'pngjs';
+import failedCases from '../../e2e/failedCases.json';
+import { verifyComparisons } from '../../e2e/matchTestCases';
+import { height, targetPixelRatio, width } from '../../e2e/env';
+
+const testCases = fs.readdirSync(path.resolve('e2e', 'cases'));
+testCases.forEach((testCase) => {
+  jest.setTimeout(90_000);
+  test(`Web browser rendered SVG should have less than 0.05% differences between device rendered SVG (${testCase})`, async () => {
+    await addMessageToReport({
+      message: JSON.stringify({
+        os: global.os,
+        arch: global.arch,
+      }),
+    });
+    const testCaseSvg = path.resolve('e2e', 'cases', testCase);
+
+    const svgXml = fs.readFileSync(testCaseSvg).toString('utf-8');
+    const response = await sendToDeviceAndReceive<RenderResponse>({
+      type: 'renderRequest',
+      data: <SvgFromXml xml={svgXml} />,
+      height,
+      width,
+    });
+
+    const referenceFilePath = path.resolve(
+      'e2e',
+      'references',
+      testCase.replace('.svg', '.png')
+    );
+    const renderedFilePath = path.resolve(
+      'e2e',
+      'rendered',
+      `${testCase.replace('.svg', '')}-${global.os}-${global.arch}-rendered.png`
+    );
+    const diffFilePath = path.resolve(
+      'e2e',
+      'diffs',
+      `${testCase.replace('.svg', '')}-${global.os}-${global.arch}-diff.png`
+    );
+    const referenceFileBuffer = fs.readFileSync(referenceFilePath);
+    const renderedDataBuffer = Buffer.from(response.data, 'base64');
+
+    // We use await everywhere instead Promise.all as we need to maintain order for ease of inspecting tests
+    // Adding reference & rendered before comparison in case compareImages fails, so we can see why it failed
+    await attachImageToReport({
+      attach: fs.readFileSync(referenceFilePath),
+      description: 'Reference image',
+      bufferFormat: 'png',
+    });
+    await attachImageToReport({
+      attach: PNG.sync.write(PNG.sync.read(renderedDataBuffer)),
+      description: 'Actual rendered image',
+      bufferFormat: 'png',
+    });
+
+    // Compare reference file (from /e2e/references) with SVG rendered on actual device.
+    // Reference files can be generated off of /e2e/cases with `yarn generateE2eReferences`.
+    const amountOfDifferentPixels = compareImages(
+      referenceFileBuffer,
+      renderedDataBuffer,
+      {
+        width,
+        height,
+        pixelRatio: targetPixelRatio,
+        diffFilePath,
+        renderedFilePath,
+      }
+    );
+
+    await attachImageToReport({
+      attach: fs.readFileSync(diffFilePath),
+      description: 'Differences',
+      bufferFormat: 'png',
+    });
+
+    // Check if there is more than 0.5% different pixels in whole snapshot
+    verifyComparisons(
+      amountOfDifferentPixels,
+      failedCases,
+      global as unknown as HandshakeMessageData,
+      testCase
+    );
+  });
+});