@shopify/react-native-skia 1.12.3 → 2.0.0-next.2

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

@@ -9,9 +9,9 @@ import { Circle, FitBox, Rect, Image, Group, fitbox } from "../components";
 import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("FitBox", () => {
-  it("Should scale the rectangle in half", () => {
+  it("Should scale the rectangle in half", async () => {
     const { Skia } = importSkia();
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox
         src={Skia.XYWHRect(0, 0, width, height)}
         dst={Skia.XYWHRect(width / 4, height / 4, width / 2, height / 2)}
@@ -21,9 +21,9 @@ 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", () => {
+  it("Should take the bottom right quarter of the circle and scale to the full canvas", async () => {
     const { Skia } = importSkia();
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox
         src={Skia.XYWHRect(width / 2, height / 2, width / 2, height / 2)}
         dst={Skia.XYWHRect(0, 0, width, height)}
@@ -38,7 +38,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-quarter-circle.png");
   });
-  it("Should scale the image (1)", () => {
+  it("Should scale the image (1)", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -47,7 +47,7 @@ describe("FitBox", () => {
         )
       )
     )!;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group
         transform={fitbox(
           "cover",
@@ -66,7 +66,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/scaled-image.png");
   });
-  it("Should scale the image (2)", () => {
+  it("Should scale the image (2)", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -76,7 +76,7 @@ describe("FitBox", () => {
       )
     )!;
     const screen = rect(256, 128, 256, 512);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group>
         <Image
           image={image}
@@ -95,7 +95,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/scaled-image2.png");
   });
-  it("Should rotate and scale the image", () => {
+  it("Should rotate and scale the image", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -107,7 +107,7 @@ describe("FitBox", () => {
     const screen = rect(256, 128, 256, 512);
     const imageRect = rect(0, 0, image.width(), image.height());
     const transform = fitbox("contain", imageRect, screen, 270);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group>
         <Image
           image={image}

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

@@ -25,7 +25,7 @@ describe("Glyphs", () => {
     font = Skia.Font(tf!, 64);
     expect(font !== null).toBe(true);
   });
-  it("Should draw glyphs in lightblue", () => {
+  it("Should draw glyphs in lightblue", async () => {
     const { Skia } = importSkia();
     const ids = font.getGlyphIDs("ab");
     const glyphs = [
@@ -38,7 +38,7 @@ describe("Glyphs", () => {
         ),
       },
     ];
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Glyphs x={0} y={0} font={font} glyphs={glyphs} color="lightblue" />
     );
     processResult(surface, "snapshots/glyphs/simple.png");

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

@@ -9,7 +9,7 @@ import { Fill, ImageShader, Shader } from "../components";
 import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("Test Image Component", () => {
-  it("Should display the image with a filter", () => {
+  it("Should display the image with a filter", async () => {
     const { Skia } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -26,7 +26,7 @@ half4 main(float2 xy) {
   xy.x += sin(xy.y / r) * 4;
   return image.eval(xy).rbga;
 }`)!;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Fill>
         <Shader source={filter} uniforms={{ r: 50 }}>
           <ImageShader

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

@@ -8,7 +8,7 @@ import { drawOnNode, width, importSkia } from "./setup";
 const size = width;
 
 describe("Path Examples", () => {
-  it("Should draw an arc", () => {
+  it("Should draw an arc", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const arcRect = {
@@ -18,11 +18,11 @@ describe("Path Examples", () => {
       height: size,
     };
     path.addArc(arcRect, 45, 270);
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/arc.png");
   });
 
-  it("Should draw an oval", () => {
+  it("Should draw an oval", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const rct = {
@@ -32,11 +32,11 @@ describe("Path Examples", () => {
       height: size,
     };
     path.addOval(rct);
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/oval.png");
   });
 
-  it("Should draw an rounded rectangle", () => {
+  it("Should draw an rounded rectangle", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     path.addRRect({
@@ -49,11 +49,11 @@ describe("Path Examples", () => {
       rx: size / 4,
       ry: size / 4,
     });
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/rrect.png");
   });
 
-  it("Should draw a polygon", () => {
+  it("Should draw a polygon", async () => {
     const { Skia, vec } = importSkia();
     const path = Skia.Path.Make();
     const r = size / 4;
@@ -67,7 +67,7 @@ describe("Path Examples", () => {
       true
     );
 
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Path path={path} strokeWidth={4} style="stroke" color="lightblue" />
     );
     processResult(surface, "snapshots/paths/poly.png");

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

@@ -4,7 +4,7 @@ import { processResult } from "../../__tests__/setup";
 import { Fill, Picture, Group } from "../components";
 
 import type { EmptyProps } from "./setup";
-import { wait, importSkia, mountCanvas, width } from "./setup";
+import { importSkia, mountCanvas, wait, width } from "./setup";
 
 const CheckPicture = ({}: EmptyProps) => {
   const { createPicture, Skia } = importSkia();
@@ -22,9 +22,7 @@ const CheckPicture = ({}: EmptyProps) => {
         paint.setColor(Skia.Color(color));
         canvas.drawCircle(r, r, r, paint);
       }),
-    // In a non-test environment, createPicture and Skia will be top-level, not part of the array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color]
+    [Skia, color, createPicture, r]
   );
   return (
     <Group>
@@ -63,20 +61,20 @@ const CheckPicture2 = ({}: EmptyProps) => {
 
 describe("Picture", () => {
   it("should respect dependency array", async () => {
-    const { surface, draw } = mountCanvas(<CheckPicture />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckPicture />);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
-    await wait(32);
-    draw();
+    await wait(1000);
+    await draw();
     processResult(surface, "snapshots/pictures/red.png");
   });
 
   it("should not redraw if there are no dependency", async () => {
-    const { surface, draw } = mountCanvas(<CheckPicture2 />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckPicture2 />);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
-    await wait(32);
-    draw();
+    await wait(1000);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
   });
 });

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

@@ -12,8 +12,8 @@ describe("Renderer", () => {
   it("Loads renderer without Skia", () => {
     expect(SkiaRenderer).toBeDefined();
   });
-  it("Light blue rectangle", () => {
-    const surface = drawOnNode(
+  it("Light blue rectangle", async () => {
+    const surface = await drawOnNode(
       <Rect
         x={(width - size) / 2}
         y={(width - size) / 2}
@@ -24,10 +24,10 @@ describe("Renderer", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
-  it("Scaled light blue rectangle", () => {
+  it("Scaled light blue rectangle", async () => {
     const scale = 2;
     const scaled = size / scale;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ scale }]} origin={center}>
         <Rect
           x={(width - scaled) / 2}
@@ -40,7 +40,7 @@ describe("Renderer", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
-  it("Points", () => {
+  it("Points", async () => {
     const { vec } = importSkia();
     const c = { x: width / 2, y: size / 2 + 16 };
     const S = 25;
@@ -69,7 +69,7 @@ describe("Renderer", () => {
     ];
 
     const cubics = [...c1, ...c2, ...c3, ...c4];
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group color="#61DAFB" style="stroke" strokeWidth={3}>
         <Points mode="polygon" points={cubics} />
         <Line p1={c} p2={vec(size, 0)} />

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

@@ -51,11 +51,11 @@ describe("Surface", () => {
       surface.dispose();
     }
   });
-  it("A raster surface shouldn't leak (3)", () => {
+  it("A raster surface shouldn't leak (3)", async () => {
     for (let i = 0; i < 10; i++) {
       //const t = performance.now();
       const r = 128;
-      const surface = drawOnNode(
+      const surface = await drawOnNode(
         <>
           <Group blendMode="multiply">
             <Circle cx={r} cy={r} r={r} color="cyan" />

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

@@ -16,9 +16,9 @@ import {
 } from "./setup";
 
 describe("Test different text examples", () => {
-  it("Should draw Hello World", () => {
+  it("Should draw Hello World", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Text x={0} y={fontSize} font={font} text="Hello World" />
@@ -27,13 +27,13 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/hello-world.png"));
   });
 
-  it("Should draw Hello World vertically", () => {
+  it("Should draw Hello World vertically", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const glyphs = font
       .getGlyphIDs("Hello World!")
       .map((id, i) => ({ id, pos: Skia.Point(0, (i + 1) * fontSize) }));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Glyphs font={font} glyphs={glyphs} />
@@ -42,13 +42,13 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/hello-world-vertical.png"));
   });
 
-  it("Should render the text around a circle", () => {
+  it("Should render the text around a circle", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const r = width / 2;
     path.addCircle(r, r, r / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Group transform={[{ rotate: Math.PI }]} origin={Skia.Point(r, r)}>
@@ -59,11 +59,11 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-path.png"));
   });
 
-  it("Should render a text blob", () => {
+  it("Should render a text blob", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <TextBlob blob={blob} y={fontSize} x={0} />
@@ -72,7 +72,7 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-blob.png"));
   });
 
-  it("Should render text with Emojis", () => {
+  it("Should render text with Emojis", async () => {
     const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
@@ -85,7 +85,7 @@ describe("Test different text examples", () => {
     const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data)!;
     expect(tf).toBeTruthy();
     const emojiFont = Skia.Font(tf, fontSize);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Text text="🙋🌎" font={emojiFont} y={fontSize} x={0} />
@@ -94,7 +94,7 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-emoji.png"));
   });
 
-  it("Should calculate chinese text width correctly", () => {
+  it("Should calculate chinese text width correctly", async () => {
     const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
@@ -109,7 +109,7 @@ describe("Test different text examples", () => {
     const font = Skia.Font(tf, fontSize);
     const text = "欢迎";
     const padding = 16;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Text
           text={text}

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

@@ -10,18 +10,18 @@ describe("Renderer", () => {
   it("Loads renderer without Skia", () => {
     expect(SkiaRenderer).toBeDefined();
   });
-  it("Scale with origin", () => {
+  it("Scale with origin", async () => {
     const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ scale: 0.5 }]} origin={origin}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Scale with origin using a matrix", () => {
+  it("Scale with origin using a matrix", async () => {
     const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
@@ -31,32 +31,32 @@ describe("Renderer", () => {
       .scale(0.5)
       .translate(-origin.x, -origin.y);
     expect(matrix.get()).toStrictEqual([0.5, 0, 192, 0, 0.5, 192, 0, 0, 1]);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group matrix={matrix}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Scale with matrix and origin", () => {
+  it("Scale with matrix and origin", async () => {
     const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
     const origin = Skia.Point(size / 2, size / 2);
     matrix.scale(0.5);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group matrix={matrix} origin={origin}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Should rotate a rectangle to 180deg", () => {
+  it("Should rotate a rectangle to 180deg", async () => {
     const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
     const w = size / 4;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ rotate: Math.PI }]} origin={origin}>
         <Rect
           x={origin.x - w / 2}

package/src/renderer/__tests__/documentation/Group.spec.tsx

@@ -51,12 +51,12 @@ const TestRasterization = () => {
 };
 
 describe("Group", () => {
-  it("Should use a rectangle as a clip", () => {
+  it("Should use a rectangle as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { rect } = importSkia();
     expect(image).toBeTruthy();
     const rct = rect(padding, padding, size - padding * 2, size - padding * 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="lightblue" />
         <Group clip={rct}>
@@ -73,7 +73,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-rect.png"));
   });
-  it("Should use a rounded rectangle as a clip", () => {
+  it("Should use a rounded rectangle as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { rect, rrect } = importSkia();
     expect(image).toBeTruthy();
@@ -82,7 +82,7 @@ describe("Group", () => {
       r,
       r
     );
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={rct}>
         <Image
           image={image}
@@ -96,7 +96,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-rrect.png"));
   });
-  it("Should use a path as a clip", () => {
+  it("Should use a path as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { processTransform2d, Skia } = importSkia();
     expect(image).toBeTruthy();
@@ -105,7 +105,7 @@ describe("Group", () => {
     )!;
     expect(star).toBeTruthy();
     star.transform(processTransform2d([{ scale: 3 }]));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={star}>
         <Image
           image={image}
@@ -119,7 +119,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-path.png"));
   });
-  it("Should invert a clip", () => {
+  it("Should invert a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { processTransform2d, Skia } = importSkia();
     expect(image).toBeTruthy();
@@ -128,7 +128,7 @@ describe("Group", () => {
     )!;
     expect(star).toBeTruthy();
     star.transform(processTransform2d([{ scale: 3 }]));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={star} invertClip>
         <Image
           image={image}
@@ -142,7 +142,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/invert-clip.png"));
   });
-  it("Should scale an SVG Path properly", () => {
+  it("Should scale an SVG Path properly", async () => {
     const { rect, Skia } = importSkia();
     const svgPath =
       // eslint-disable-next-line max-len
@@ -151,7 +151,7 @@ describe("Group", () => {
     expect(path).toBeTruthy();
     const src = path.computeTightBounds();
     const strokeWidth = 30 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox src={src} dst={rect(0, 0, width, height)}>
         <Path
           path={path}
@@ -164,8 +164,8 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/scale-path.png"));
   });
-  it("Should use saveLayer() properly", () => {
-    const surface = drawOnNode(<TestRasterization />);
+  it("Should use saveLayer() properly", async () => {
+    const surface = await drawOnNode(<TestRasterization />);
     processResult(surface, docPath("group/rasterize.png"));
   });
 });

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

@@ -35,8 +35,8 @@ describe("Getting Started / Hello World", () => {
       docPath("getting-started/hello-world/blend-modes.png")
     );
   });
-  it("Hello world with the declarative API", () => {
-    const surface = drawOnNode(
+  it("Hello world with the declarative API", async () => {
+    const surface = await drawOnNode(
       <Group blendMode="multiply">
         <Circle cx={r} cy={r} r={r} color="cyan" />
         <Circle cx={size - r} cy={r} r={r} color="magenta" />

package/src/renderer/__tests__/documentation/paint/Overview.spec.tsx

@@ -19,12 +19,12 @@ const TestPaintAssignment = () => {
 };
 
 describe("Paint", () => {
-  it("should draw the color fill and strokes properly", () => {
+  it("should draw the color fill and strokes properly", async () => {
     const { vec } = importSkia();
     const strokeWidth = 10 * PIXEL_RATIO;
     const c = vec(width / 2, height / 2);
     const r = (width - strokeWidth) / 2;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Circle c={c} r={r} color="red">
           <Paint color="lightblue" />
@@ -36,10 +36,10 @@ describe("Paint", () => {
     processResult(surface, docPath("paint/stroke.png"));
   });
 
-  it("should use paint inheritance properly", () => {
+  it("should use paint inheritance properly", async () => {
     const r = width / 6;
     const strokeWidth = 10 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group color="lightblue">
         <Circle cx={r} cy={r} r={r} />
         <Group style="stroke" strokeWidth={strokeWidth}>
@@ -50,17 +50,17 @@ describe("Paint", () => {
     processResult(surface, docPath("paint/inheritance.png"));
   });
 
-  it("should use paint assignement properly", () => {
-    const surface = drawOnNode(<TestPaintAssignment />);
+  it("should use paint assignement properly", async () => {
+    const surface = await drawOnNode(<TestPaintAssignment />);
     processResult(surface, docPath("paint/assignement.png"));
   });
 
-  it("should use the opacity property properly", () => {
+  it("should use the opacity property properly", async () => {
     const { vec } = importSkia();
     const strokeWidth = 30 * PIXEL_RATIO;
     const r = width / 2 - strokeWidth / 2;
     const c = vec(width / 2, height / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group opacity={0.5}>
         <Circle c={c} r={r} color="red" />
         <Circle

package/src/renderer/__tests__/documentation/shapes/Box.spec.tsx

@@ -5,11 +5,11 @@ import { docPath, processResult } from "../../../../__tests__/setup";
 import { Box, BoxShadow, Fill } from "../../../components";
 
 describe("Box", () => {
-  it("should draw a box with inner and outer shadow", () => {
+  it("should draw a box with inner and outer shadow", async () => {
     const { rect, rrect } = importSkia();
     const size = width / 2;
     const d = 10 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="#add8e6" />
         <Box
@@ -29,9 +29,9 @@ describe("Box", () => {
     );
     processResult(surface, docPath("box/shadows.png"));
   });
-  it("should draw a box with red stroke", () => {
+  it("should draw a box with red stroke", async () => {
     const size = width / 2;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Box
           box={{ width: size, height: size, x: 1, y: 1 }}

package/src/renderer/__tests__/e2e/Atlas.spec.tsx

@@ -168,7 +168,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
@@ -211,7 +211,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
@@ -283,7 +283,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}

package/src/renderer/__tests__/e2e/Offscreen.spec.tsx

@@ -100,7 +100,7 @@ describe("Offscreen Drawings", () => {
     const { width, height } = surface;
     const { drawAsImage } = importSkia();
     const r = width / 2;
-    const image = drawAsImage(
+    const image = await drawAsImage(
       <Circle r={r} cx={r} cy={r} color="lightblue" />,
       { width, height }
     );