Refine Skia core import in unit tests (#803)

package/src/renderer/__tests__/CoonPatch.spec.tsx

@@ -4,14 +4,14 @@ import { processResult } from "../../__tests__/setup";
 import { Patch } from "../components";
 import * as SkiaRenderer from "../index";
 
-import { drawOnNode, width, Skia } from "./setup";
+import { drawOnNode, width, importSkia } from "./setup";
 
 describe("CoonsPatch", () => {
   it("Renderer", () => {
     expect(SkiaRenderer).toBeDefined();
   });
   it("Simple Coons Patch", () => {
-    const vec = Skia.Point;
+    const { vec } = importSkia();
     const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
     const C = 64;
     const topLeft = { pos: vec(0, 0), c1: vec(0, C), c2: vec(C, 0) };

package/src/renderer/__tests__/Data.spec.tsx

@@ -1,21 +1,19 @@
-import path from "path";
-
 import React from "react";
 
 import { processResult } from "../../__tests__/setup";
 import { Fill } from "../components";
 import * as SkiaRenderer from "../index";
 import type { SkData } from "../../skia/types/Data/Data";
 
-import { mountCanvas, nodeRequire, Skia } from "./setup";
+import { importSkia, mountCanvas } from "./setup";
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface EmptyProps {}
 
 const CheckData = ({}: EmptyProps) => {
-  const { useFont } = require("../../skia/core/Font");
+  const { useFont } = importSkia();
   const font = useFont(null);
   if (font === null) {
     return <Fill color="green" />;
@@ -24,41 +22,29 @@ const CheckData = ({}: EmptyProps) => {
 };
 
 const CheckFont = ({}: EmptyProps) => {
-  const { useFont } = require("../../skia/core/Font");
-  const font = useFont(
-    nodeRequire(
-      path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
-    )
-  );
+  const { useFont } = importSkia();
+  const font = useFont("skia/__tests__/assets/Roboto-Medium.ttf");
   if (!font) {
     return <Fill color="red" />;
   }
   return <Fill color="green" />;
 };
 
 const CheckImage = ({}: EmptyProps) => {
-  const { useImage } = require("../../skia/core/Image");
-  const image = useImage(
-    nodeRequire(
-      path.resolve(__dirname, "../../skia/__tests__/assets/zurich.jpg")
-    )
-  );
+  const { useImage } = importSkia();
+  const image = useImage("skia/__tests__/assets/zurich.jpg");
   if (!image) {
     return <Fill color="red" />;
   }
   return <Fill color="green" />;
 };
 
 const CheckDataCollection = ({}: EmptyProps) => {
-  const { useDataCollection } = require("../../skia/core/Data");
+  const { useDataCollection, Skia } = importSkia();
   const font = useDataCollection(
     [
-      nodeRequire(
-        path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
-      ),
-      nodeRequire(
-        path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
-      ),
+      "skia/__tests__/assets/Roboto-Medium.ttf",
+      "skia/__tests__/assets/Roboto-Medium.ttf",
     ],
     (data: SkData) => Skia.Typeface.MakeFreeTypeFaceFromData(data)
   );

package/src/renderer/__tests__/Drawings.spec.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { processResult } from "../../__tests__/setup";
 import { Blur, Circle, Fill, Group, Paint, RoundedRect } from "../components";
 
-import { drawOnNode, width, Skia, height } from "./setup";
+import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("Test introductionary examples from our documentation", () => {
   it("Should blend colors using multiplication", () => {
@@ -32,6 +32,7 @@ describe("Test introductionary examples from our documentation", () => {
   });
 
   it("Should render a transform with the correct origin", () => {
+    const { Skia } = importSkia();
     const r = width * 0.33;
     const surface = drawOnNode(
       <Group
@@ -48,6 +49,7 @@ describe("Test introductionary examples from our documentation", () => {
   });
 
   it("Should use radians for the skew transformation", () => {
+    const { Skia } = importSkia();
     const r = width / 4;
     const surface = drawOnNode(
       <>

package/src/renderer/__tests__/FitBox.spec.tsx

@@ -3,10 +3,11 @@ import React from "react";
 import { processResult } from "../../__tests__/setup";
 import { Circle, FitBox, Rect } from "../components";
 
-import { drawOnNode, width, height, Skia } from "./setup";
+import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("FitBox", () => {
   it("Should scale the rectangle in half", () => {
+    const { Skia } = importSkia();
     const surface = drawOnNode(
       <FitBox
         src={Skia.XYWHRect(0, 0, width, height)}
@@ -18,6 +19,7 @@ describe("FitBox", () => {
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
   it("Should take the bottom right quarter of the circle and scale to the full canvas", () => {
+    const { Skia } = importSkia();
     const surface = drawOnNode(
       <FitBox
         src={Skia.XYWHRect(width / 2, height / 2, width / 2, height / 2)}

package/src/renderer/__tests__/Glyphs.spec.tsx

@@ -7,13 +7,14 @@ import type { SkFont } from "../../skia/types";
 import { processResult } from "../../__tests__/setup";
 import { Glyphs } from "../components";
 
-import { drawOnNode, Skia } from "./setup";
+import { drawOnNode, importSkia } from "./setup";
 
 let font: SkFont;
 const fontSize = 64;
 
 describe("Glyphs", () => {
   beforeAll(() => {
+    const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
         path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
@@ -25,6 +26,7 @@ describe("Glyphs", () => {
     expect(font !== null).toBe(true);
   });
   it("Should draw glyphs in lightblue", () => {
+    const { Skia } = importSkia();
     const ids = font.getGlyphIDs("ab");
     const glyphs = [
       { id: ids[0], pos: Skia.Point(0, fontSize) },

package/src/renderer/__tests__/Image.spec.tsx

@@ -6,10 +6,11 @@ import React from "react";
 import { processResult } from "../../__tests__/setup";
 import { Fill, ImageShader, Shader } from "../components";
 
-import { drawOnNode, width, Skia, height } from "./setup";
+import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("Test Image Component", () => {
   it("Should display the image with a filter", () => {
+    const { Skia } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
         fs.readFileSync(

package/src/renderer/__tests__/Paths.spec.tsx

@@ -4,10 +4,11 @@ import type { JsiSkPaint } from "../../skia/web/JsiSkPaint";
 import { processResult } from "../../__tests__/setup";
 import { Drawing, FitBox, Group, LinearGradient, Path } from "../components";
 
-import { drawOnNode, width, Skia, height } from "./setup";
+import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("Path Examples", () => {
   it("Should render the Skia logo with proper stroke joins and caps", () => {
+    const { Skia } = importSkia();
     const path = Skia.Path.MakeFromSVGString(
       // eslint-disable-next-line max-len
       "M512.213 204.005C500.312 185.697 406.758 105.581 332.94 105.581C259.122 105.581 219.088 132 204.638 149.85C157.952 207.52 141.933 264.275 156.579 320.115C175.803 387.854 228.896 449.644 315.859 505.483C415.638 562.238 479.716 626.774 508.093 699.091C518.163 731.13 519.536 762.711 512.213 793.835C504.889 824.959 490.243 853.336 468.273 878.967C449.965 903.683 425.707 921.534 395.499 932.518C365.291 942.588 328.675 950.369 285.651 955.861C182.21 964.1 97.9935 948.538 33 909.176M595.972 733.419C710.397 564.985 795.529 424.47 851.369 311.876C865.1 279.837 875.169 255.579 881.577 239.102C887.985 221.709 894.393 198.824 900.801 170.447C907.208 142.069 909.497 115.98 907.666 92.1797C904.92 68.3793 893.02 51.9021 871.965 40.0019C850.911 28.1016 835.5 31.3101 811.549 44.1212C772.187 65.1754 745.64 101.334 731.909 152.596C723.67 174.566 715.432 200.197 707.193 229.49C699.87 258.783 694.378 281.21 690.716 296.772C687.97 312.334 682.935 340.711 675.612 381.904C668.289 422.182 663.712 445.982 661.881 453.306C643.573 567.731 621.603 733.876 595.972 951.742C624.349 852.878 656.846 774.154 693.462 715.568C706.278 689.937 717.263 669.798 726.417 655.152C735.571 640.505 748.844 624.486 766.237 607.093C784.545 589.701 803.768 576.885 823.907 568.646C892.562 543.015 941.994 545.304 972.202 575.512C990.51 594.735 999.664 618.078 999.664 645.54C1000.58 673.002 990.052 694.514 968.083 710.076C925.059 733.876 859.608 741.657 771.729 733.419C786.375 737.996 797.36 742.115 804.683 745.776C812.922 748.523 822.992 753.1 834.892 759.508C847.707 765.915 857.319 773.696 863.727 782.85C871.05 792.004 875.627 802.531 877.458 814.432C878.373 819.009 879.746 827.705 881.577 840.521C884.323 853.336 886.612 862.948 888.443 869.356C890.273 875.763 892.562 884.002 895.308 894.072C898.97 904.141 903.089 912.837 907.666 920.16C913.159 926.568 919.566 932.976 926.89 939.384C949.775 961.354 987.764 958.607 1040.86 931.145C1056.42 923.822 1070.61 914.668 1083.42 903.683C1097.15 892.698 1109.97 879.425 1121.87 863.863C1134.69 847.386 1144.76 834.113 1152.08 824.043C1159.4 813.058 1169.47 797.039 1182.29 775.985C1195.1 754.931 1204.26 740.742 1209.75 733.419C1239.04 674.833 1268.33 616.247 1297.63 557.661C1252.77 670.256 1223.94 756.304 1211.12 815.805C1205.63 833.197 1203.34 853.336 1204.26 876.221C1205.17 899.106 1212.04 917.414 1224.85 931.145C1234.01 942.13 1245.45 949.453 1259.18 953.115C1273.83 956.777 1287.56 956.319 1300.37 951.742C1356.21 935.265 1401.53 903.226 1436.31 855.625C1456.45 828.163 1483.45 787.427 1517.32 733.419M1360.79 390.143C1347.97 390.143 1340.19 384.193 1337.45 372.293C1335.62 359.477 1336.99 348.492 1341.57 339.338C1345.24 332 1357.13 333.846 1369.03 333.846C1380.93 333.846 1390.5 340.5 1391 348.95M1925.13 697.718C1902.25 633.64 1874.33 593.82 1841.38 578.258C1810.25 559.95 1775.47 551.254 1737.02 552.169C1698.57 552.169 1664.25 562.238 1634.04 582.377C1605.66 598.855 1581.4 620.824 1561.26 648.286C1541.12 674.833 1527.39 704.126 1520.07 736.165C1513.66 767.288 1514.58 798.87 1522.82 830.909C1531.97 862.032 1547.53 888.579 1569.5 910.549C1604.29 939.842 1646.4 954.488 1695.83 954.488C1745.26 954.488 1787.82 939.842 1823.53 910.549C1838.17 895.902 1848.7 885.375 1855.11 878.967C1861.51 872.56 1868.84 863.406 1877.08 851.505C1886.23 839.605 1893.55 827.247 1899.05 814.432M1958.09 556.288C1933.37 657.898 1916.9 746.234 1908.66 821.297C1900.42 878.967 1911.4 918.787 1941.61 940.757C1964.5 959.065 2000.2 956.319 2048.71 932.518C2090.82 912.38 2131.1 873.017 2169.55 814.432"

package/src/renderer/__tests__/Shader.spec.tsx

@@ -4,7 +4,7 @@ import { processResult } from "../../__tests__/setup";
 import { Fill, Group, ShaderLib } from "../components";
 import { Shader } from "../components/shaders/Shader";
 
-import { drawOnNode, Skia, height, width } from "./setup";
+import { drawOnNode, height, width, importSkia } from "./setup";
 
 const bilinearInterpolation = `
 uniform vec4 position;
@@ -54,6 +54,7 @@ half4 main(float2 p) {
 
 describe("Test Shader component", () => {
   it("should flatten shader uniforms", () => {
+    const { Skia } = importSkia();
     const source = Skia.RuntimeEffect.Make(bilinearInterpolation)!;
     expect(source).toBeTruthy();
     const surface = drawOnNode(
@@ -73,6 +74,7 @@ describe("Test Shader component", () => {
     processResult(surface, "snapshots/shader/bilinear-interpolation.png");
   });
   it("should display a hue wheel", () => {
+    const { Skia } = importSkia();
     const source = Skia.RuntimeEffect.Make(hue)!;
     expect(source).toBeTruthy();
     const surface = drawOnNode(
@@ -90,6 +92,7 @@ describe("Test Shader component", () => {
     processResult(surface, "snapshots/shader/hue.png");
   });
   it("should display a green and red spiral", () => {
+    const { Skia } = importSkia();
     const source = Skia.RuntimeEffect.Make(spiral)!;
     expect(source).toBeTruthy();
     const surface = drawOnNode(

package/src/renderer/__tests__/Simple.spec.tsx

@@ -4,7 +4,7 @@ import { processResult } from "../../__tests__/setup";
 import { Group, Line, Points, Rect } from "../components";
 import * as SkiaRenderer from "../index";
 
-import { center, drawOnNode, width, Skia } from "./setup";
+import { center, drawOnNode, width, importSkia } from "./setup";
 
 const size = width / 2;
 
@@ -41,7 +41,7 @@ describe("Renderer", () => {
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
   it("Points", () => {
-    const vec = Skia.Point;
+    const { vec } = importSkia();
     const c = { x: width / 2, y: size / 2 + 16 };
     const S = 25;
     const c1 = [

package/src/renderer/__tests__/Text.spec.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { processResult, docPath } from "../../__tests__/setup";
 import { TextPath, Fill, Text, Glyphs, TextBlob, Group } from "../components";
 
-import { drawOnNode, Skia, width, font, fontSize } from "./setup";
+import { drawOnNode, width, font, fontSize, importSkia } from "./setup";
 
 describe("Test different text examples", () => {
   it("Should draw Hello World", () => {
@@ -20,6 +20,7 @@ describe("Test different text examples", () => {
   });
 
   it("Should draw Hello World vertically", () => {
+    const { Skia } = importSkia();
     const glyphs = font
       .getGlyphIDs("Hello World!")
       .map((id, i) => ({ id, pos: Skia.Point(0, (i + 1) * fontSize) }));
@@ -33,6 +34,7 @@ describe("Test different text examples", () => {
   });
 
   it("Should render the text around a circle", () => {
+    const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const r = width / 2;
     path.addCircle(r, r, r / 2);
@@ -48,6 +50,7 @@ describe("Test different text examples", () => {
   });
 
   it("Should render a text blob", () => {
+    const { Skia } = importSkia();
     const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
     const surface = drawOnNode(
       <>
@@ -59,6 +62,7 @@ describe("Test different text examples", () => {
   });
 
   it("Should render text with Emojis", () => {
+    const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
         nodePath.resolve(

package/src/renderer/__tests__/Transform.spec.tsx

@@ -4,13 +4,14 @@ import { processResult } from "../../__tests__/setup";
 import { Group, Rect } from "../components";
 import * as SkiaRenderer from "../index";
 
-import { drawOnNode, width, Skia } from "./setup";
+import { drawOnNode, width, importSkia } from "./setup";
 
 describe("Renderer", () => {
   it("Loads renderer without Skia", () => {
     expect(SkiaRenderer).toBeDefined();
   });
   it("Scale with origin", () => {
+    const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
     const surface = drawOnNode(
@@ -21,6 +22,7 @@ describe("Renderer", () => {
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
   it("Scale with origin using a matrix", () => {
+    const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
     const origin = Skia.Point(size / 2, size / 2);
@@ -35,6 +37,7 @@ describe("Renderer", () => {
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
   it("Scale with matrix and origin", () => {
+    const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
     const origin = Skia.Point(size / 2, size / 2);
@@ -47,6 +50,7 @@ describe("Renderer", () => {
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
   it("Should rotate a rectangle to 180deg", () => {
+    const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
     const w = size / 4;

package/src/renderer/__tests__/documentation/getting-started/HelloWorld.spec.tsx

@@ -4,13 +4,14 @@ import { BlendMode } from "../../../../skia/types";
 import { setupSkia } from "../../../../skia/__tests__/setup";
 import { docPath, processResult } from "../../../../__tests__/setup";
 import { Circle, Drawing, Group } from "../../../components";
-import { drawOnNode, width, height, Skia } from "../../setup";
+import { drawOnNode, width, height, importSkia } from "../../setup";
 
 const size = width;
 const r = size * 0.33;
 
 describe("Getting Started / Hello World", () => {
   it("Hello world with the imperative API", () => {
+    const { Skia } = importSkia();
     const { surface, canvas } = setupSkia(width, height);
 
     const paint = Skia.Paint();
@@ -48,6 +49,7 @@ describe("Getting Started / Hello World", () => {
     );
   });
   it("Hello world with the declarative and the imperative API", () => {
+    const { Skia } = importSkia();
     const surface = drawOnNode(
       <Group blendMode="multiply">
         <Drawing

package/src/renderer/__tests__/setup.tsx

@@ -13,10 +13,17 @@ import type { DrawingContext } from "../DrawingContext";
 import { CanvasProvider } from "../useCanvas";
 import { ValueApi } from "../../values/web";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
-import type { SkFont } from "../../skia";
+import type * as SkiaExports from "../../skia";
 
-export let Skia: ReturnType<typeof JsiSkApi>;
-export let font: SkFont;
+export let font: SkiaExports.SkFont;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(global as any).fetch = jest.fn((uri: string) =>
+  Promise.resolve({
+    arrayBuffer: () =>
+      Promise.resolve(fs.readFileSync(path.resolve(__dirname, `../../${uri}`))),
+  })
+);
 
 jest.mock("react-native", () => ({
   Platform: { OS: "web" },
@@ -25,11 +32,12 @@ jest.mock("react-native", () => ({
   },
 }));
 
-export const nodeRequire = (uri: string) => fs.readFileSync(uri);
+export const importSkia = (): typeof SkiaExports => require("../../skia");
 
 beforeAll(async () => {
   await LoadSkiaWeb();
-  Skia = JsiSkApi(global.CanvasKit);
+  const Skia = JsiSkApi(global.CanvasKit);
+  global.SkiaApi = Skia;
   const data = Skia.Data.fromBytes(
     fs.readFileSync(
       path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
@@ -64,7 +72,7 @@ export const drawOnNode = (element: ReactNode) => {
 };
 
 export const mountCanvas = (element: ReactNode) => {
-  global.SkiaApi = Skia;
+  const Skia = global.SkiaApi;
   expect(Skia).toBeDefined();
   const surface = Skia.Surface.Make(width, height)!;
   expect(surface).toBeDefined();