feat: add image snap test

Author: zhiqingchen

.gitignore

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

package.json

@@ -69,6 +69,7 @@
     "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/__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,9 +41,10 @@ echarts.use([
   SVGRenderer,
   BarChart,
 ]);
+
 const Components = [SkiaComponent, SVGComponent];
 const E_HEIGHT = 250;
-const E_WIDTH = Dimensions.get('screen').width;//750
+const E_WIDTH = Dimensions.get('screen').width; //750
 const option = {
   xAxis: {
     type: 'category',
@@ -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]);
 
   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

@@ -55,7 +55,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,7 +88,7 @@ function SkiaComponent(
           zrenderId.current = id;
         },
         makeImageSnapshot: () => {
-          const image = canvasRef.current?.makeImageSnapshot();
+          const image = canvasRef?.current?.makeImageSnapshot();
           return image ? `data:image/png;base64,${image.encodeToBase64()}` : null;
         }
       },