feat: add image snap test

Author: zhiqingchen

.github/actions/setup/action.yml

@@ -5,23 +5,23 @@ runs:
   using: composite
   steps:
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: lts/*
 
     - name: Cache dependencies
       id: yarn-cache
       uses: actions/cache@v3
       with:
         path: |
           **/node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          ${{ runner.os }}-yarn-
+          ${{ runner.os }}-yarn-v1-
 
     - name: Install dependencies
       if: steps.yarn-cache.outputs.cache-hit != 'true'
       run: |
         yarn install --cwd example --frozen-lockfile
-        yarn install --frozen-lockfile
+        yarn install --frozen-lockfile --ignore-engines
       shell: bash

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
 
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -19,7 +19,7 @@ jobs:
         run: yarn typescript
 
   test:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -31,7 +31,7 @@ jobs:
         run: yarn test --maxWorkers=2 --coverage
 
   build:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/publish.yml

@@ -13,14 +13,17 @@ env:
 jobs:
   publish:
     name: publish
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     strategy:
       fail-fast: false
       matrix:
         node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
       - name : GITHUB CONTEXT
         env:
           GITHUB_CONTEXT: ${{ toJson(github) }}

.gitignore

@@ -77,3 +77,6 @@ lib/
 
 # Docusaurus (when switching from docs branches to code branches)
 .docusaurus/
+
+# jest
+coverage/

example/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@expo/webpack-config": "~19.0.1",
     "@shopify/react-native-skia": "0.1.221",
-    "echarts": "^5.5.0",
+    "echarts": "5.5.0-rc.1",
     "expo": "^50.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

example/yarn.lock

@@ -4042,7 +4042,7 @@ dotenv@~16.0.3:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-echarts@^5.5.0:
+echarts@5.5.0-rc.1:
   version "5.5.0-rc.1"
   resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0-rc.1.tgz#31ee2c4e09da24fe8149bb011c1fbd271a2bf10f"
   integrity sha512-Fnfls+zDAg9HLuWK27JakdjLjpkEZsKTk+eeSA6eOqphBNA9iXCI1CvQJZ5xD8WJY40bqdh4zCaE4AxSDjJslw==

jest.config.js

@@ -1,16 +1,16 @@
 module.exports = {
-  preset: "react-native",
+  preset: 'react-native',
   modulePathIgnorePatterns: [
-    "<rootDir>/example/node_modules",
-    "<rootDir>/lib/"
+    '<rootDir>/example/node_modules',
+    '<rootDir>/lib/',
   ],
   transformIgnorePatterns: [
     'node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia|zrender|echarts)/)',
   ],
   setupFiles: [
     '@shopify/react-native-skia/jestSetup.js',
     'react-native-gesture-handler/jestSetup.js',
-    './jestSetup.js'
+    './jestSetup.js',
   ],
   testTimeout: 30000,
-};
+};

jestSetup.js

@@ -1,6 +1,7 @@
-const { Skia } = require("@shopify/react-native-skia");
+const { Skia } = require('@shopify/react-native-skia');
 Skia.SVG.MakeFromString = (svg) => svg;
+// eslint-disable-next-line no-undef
 globalThis.navigator = {
-  product: "ReactNative",
-  userAgent: "Node.js",
+  product: 'ReactNative',
+  userAgent: 'Node.js',
 };

package.json

@@ -64,11 +64,12 @@
     "@types/react": "~18.2.14",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
-    "echarts": "^5.5.0",
+    "echarts": "5.5.0-rc.1",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^29.7.0",
+    "jest-image-snapshot": "^6.4.0",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
@@ -78,6 +79,7 @@
     "react-native-svg": "14.1.0",
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
+    "sharp": "^0.33.2",
     "typescript": "^5.0.4",
     "zrender": "^5.5.0"
   },

src/SVGRenderer.ts

@@ -70,7 +70,7 @@ class CustomSVGPainter extends SVGPainter {
       super.refresh();
     }
   }
-  toDataURL(base64?: boolean):string {
+  toDataURL(base64?: boolean): string {
     // @ts-ignore
     if (isRn && this._svgDom.makeImageSnapshot) {
       // @ts-ignore

src/__tests__/__image_snapshots__/chart-test-tsx-skia-chart-chart-renders-correctly-2-snap.png

@@ -1,6 +1,13 @@
 /**
  * @jest-environment @shopify/react-native-skia/jestEnv.mjs
  */
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toMatchImageSnapshot(): R;
+    }
+  }
+}
 import React, { useEffect, useRef } from 'react';
 import { Dimensions } from 'react-native';
 import { render } from '@testing-library/react-native';
@@ -9,6 +16,19 @@ import SVGComponent from '../svgChart';
 import { SVGRenderer } from '../SVGRenderer';
 import * as echarts from 'echarts/core';
 import { BarChart } from 'echarts/charts';
+const sharp = require('sharp');
+
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+
+function getSVGImage(svg: string) {
+  const svgString = decodeURIComponent(
+    svg.replace('data:image/svg+xml;charset=UTF-8,', '')
+  );
+  return sharp(Buffer.from(svgString)).png().toBuffer();
+}
+
+expect.extend({ toMatchImageSnapshot });
+
 import {
   TitleComponent,
   TooltipComponent,
@@ -21,10 +41,11 @@ echarts.use([
   SVGRenderer,
   BarChart,
 ]);
+
 const Components = [SkiaComponent, SVGComponent];
 const E_HEIGHT = 250;
-const E_WIDTH = Dimensions.get('screen').width;//750
-const option = {
+const E_WIDTH = Dimensions.get('screen').width; //750
+const OPTION = {
   xAxis: {
     type: 'category',
     data: ['Mon', 'Tue'],
@@ -39,7 +60,8 @@ const option = {
     },
   ],
 };
-function Chart({ option, Component }: any) {
+
+function Chart({ option, Component, getDataURL }: any) {
   const ref = useRef<any>(null);
   useEffect(() => {
     let chart: any;
@@ -51,17 +73,29 @@ function Chart({ option, Component }: any) {
         height: E_HEIGHT,
       });
       chart.setOption(option);
+      getDataURL?.(chart.getDataURL());
     }
     return () => chart?.dispose();
-  }, [option]);
+  }, [option, getDataURL]);
 
   return <Component ref={ref} />;
 }
+
 Components.forEach((Component) => {
   describe(`${Component.displayName} Chart` || 'unknown', () => {
-    it('renders correctly', () => {
+    it('renders correctly', (done) => {
       const { toJSON } = render(
-        <Chart option={option} Component={Component} />
+        <Chart
+          option={OPTION}
+          Component={Component}
+          getDataURL={(data: string) => {
+            expect(data).toBeDefined();
+            getSVGImage(data).then((d: Buffer) => {
+              expect(d).toMatchImageSnapshot();
+              done();
+            });
+          }}
+        />
       );
       expect(toJSON()).toMatchSnapshot();
     });

src/__tests__/__image_snapshots__/chart-test-tsx-svg-chart-chart-renders-correctly-2-snap.png

@@ -33,7 +33,13 @@ export function PanResponderHandler({
   dispatchEvents,
 }: PanResponderHandlerProps) {
   const [panResponder] = usePanResponder(dispatchEvents);
-  return <View testID="pan-responder-handler" {...panResponder.panHandlers} style={styles.GestureView} />;
+  return (
+    <View
+      testID="pan-responder-handler"
+      {...panResponder.panHandlers}
+      style={styles.GestureView}
+    />
+  );
 }
 
 export function usePanResponder(

src/__tests__/chart.test.tsx

@@ -8,7 +8,13 @@ import React, {
   useRef,
 } from 'react';
 
-import { Canvas, ImageSVG, Skia, SkSVG, useCanvasRef } from '@shopify/react-native-skia';
+import {
+  Canvas,
+  ImageSVG,
+  Skia,
+  SkSVG,
+  useCanvasRef,
+} from '@shopify/react-native-skia';
 
 import { View } from 'react-native';
 
@@ -55,7 +61,7 @@ function SkiaComponent(
   const [width, setWidth] = useState<number>(initialWidth ?? 0);
   const [height, setHeight] = useState<number>(initialHeight ?? 0);
   const zrenderId = useRef<number>();
-  const canvasRef = useCanvasRef();
+  const canvasRef = useCanvasRef?.();
 
   const dispatchEvents = useCallback<DispatchEvents>(
     (types, nativeEvent, eventArgs) => {
@@ -88,9 +94,11 @@ function SkiaComponent(
           zrenderId.current = id;
         },
         makeImageSnapshot: () => {
-          const image = canvasRef.current?.makeImageSnapshot();
-          return image ? `data:image/png;base64,${image.encodeToBase64()}` : null;
-        }
+          const image = canvasRef?.current?.makeImageSnapshot();
+          return image
+            ? `data:image/png;base64,${image.encodeToBase64()}`
+            : null;
+        },
       },
       viewprot: {},
       dispatchEvents,
@@ -101,12 +109,16 @@ function SkiaComponent(
         };
       },
     }),
-    [dispatchEvents, initialWidth, initialHeight]
+    [dispatchEvents, initialWidth, initialHeight, canvasRef]
   );
 
   return svgString ? (
     <View testID="component" style={{ ...style, width, height }}>
-      <Canvas style={{ ...style, width, height }} pointerEvents="auto" ref={canvasRef}>
+      <Canvas
+        style={{ ...style, width, height }}
+        pointerEvents="auto"
+        ref={canvasRef}
+      >
         <ImageSVG svg={svgString} x={0} y={0} width={width} height={height} />
       </Canvas>
       {handleGesture ? (