fix(💚): add support for testID on Canvas in Jest (#3058)

Author: wcandillon

apps/paper/jestSetup.mjs

@@ -24,6 +24,7 @@ jest.mock("react-native-reanimated", () => {
   Reanimated.useEvent = () => {};
   Reanimated.scrollTo = () => {};
   Reanimated.useFrameCallback = () => {};
+  Reanimated.convertToRGBA = () => {};
   return Reanimated;
 });
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing

apps/paper/src/Examples/Breathe/Breathe.tsx

@@ -68,7 +68,7 @@ export const Breathe = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={styles.container} opaque>
+      <Canvas style={styles.container} testID="breathe-canvas" opaque>
         <Fill color="rgb(36,43,56)" />
         <Group origin={center} transform={transform} blendMode="screen">
           <BlurMask style="solid" blur={40} />

apps/paper/src/Examples/Examples.test.tsx

@@ -19,7 +19,9 @@ import { Filters } from "./Filters";
 import { Boxes } from "./Boxes";
 
 it("should render the Breathe example correctly", () => {
-  render(<Breathe />);
+  const { getByTestId } = render(<Breathe />);
+  const breatheCanvas = getByTestId("breathe-canvas");
+  expect(breatheCanvas).toBeTruthy();
 });
 
 it("should render the Gooey example correctly", () => {

externals/skia

@@ -21,8 +21,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../animation"),
     ...require("../dom/types"),
     ...require("../dom/nodes"),
-    // We could use the real Canvas if we mock the SkiaView component for node
-    Canvas: Noop,
+    Canvas: require("react-native").View,
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,

packages/skia/src/mock/index.ts

@@ -2,11 +2,12 @@ import type { CanvasKit, EmbindEnumEntity, EmbindEnum } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
-export class NotImplementedOnRNWeb extends Error {
-  constructor(msg?: string) {
-    super(msg ?? "Not implemented on React Native Web");
+export const throwNotImplementedOnRNWeb = <T>(): T => {
+  if (typeof jest !== "undefined") {
+    return jest.fn() as unknown as T;
   }
-}
+  throw new Error("Not implemented on React Native Web");
+};
 
 export abstract class Host {
   readonly CanvasKit: CanvasKit;

packages/skia/src/skia/web/Host.ts

@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb, getEnum } from "./Host";
+import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -21,8 +21,8 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint | undefined): SkRect {
-    throw new NotImplementedOnRNWeb();
+  measureText(_text: string, _paint?: SkPaint | undefined) {
+    return throwNotImplementedOnRNWeb<SkRect>();
   }
 
   dispose = () => {

packages/skia/src/skia/web/JsiSkFont.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, FontMgr } from "canvaskit-wasm";
 
 import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb } from "./Host";
+import { HostObject, throwNotImplementedOnRNWeb } from "./Host";
 
 export class JsiSkFontMgr
   extends HostObject<FontMgr, "FontMgr">
@@ -20,7 +20,7 @@ export class JsiSkFontMgr
   getFamilyName(index: number) {
     return this.ref.getFamilyName(index);
   }
-  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle): SkTypeface {
-    throw new NotImplementedOnRNWeb();
+  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle) {
+    return throwNotImplementedOnRNWeb<SkTypeface>();
   }
 }

packages/skia/src/skia/web/JsiSkFontMgr.ts

@@ -9,7 +9,7 @@ import type {
   ImageFactory,
 } from "../types";
 
-import { Host, getEnum } from "./Host";
+import { Host, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkData } from "./JsiSkData";
 import type { JsiSkSurface } from "./JsiSkSurface";
@@ -75,8 +75,8 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     return new JsiSkImage(this.CanvasKit, image);
   }
 
-  MakeImageFromNativeTextureUnstable(): SkImage {
-    throw new Error("MakeImageFromNativeTexture is not implemented on web");
+  MakeImageFromNativeTextureUnstable() {
+    return throwNotImplementedOnRNWeb<SkImage>();
   }
 
   MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {

packages/skia/src/skia/web/JsiSkImageFactory.ts

@@ -13,7 +13,7 @@ import type {
   TileMode,
 } from "../types";
 
-import { Host, NotImplementedOnRNWeb, getEnum } from "./Host";
+import { Host, throwNotImplementedOnRNWeb, getEnum } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
@@ -107,9 +107,7 @@ export class JsiSkImageFilterFactory
     const inputFilter =
       input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadow(
       dx,
@@ -134,9 +132,7 @@ export class JsiSkImageFilterFactory
     const inputFilter =
       input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(
       dx,
@@ -158,9 +154,7 @@ export class JsiSkImageFilterFactory
     const inputFilter =
       input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeErode(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -175,9 +169,7 @@ export class JsiSkImageFilterFactory
     const inputFilter =
       input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDilate(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -194,9 +186,7 @@ export class JsiSkImageFilterFactory
         ? null
         : JsiSkImageFilter.fromValue<ImageFilter>(foreground);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeBlend(
       getEnum(this.CanvasKit.BlendMode, mode),
@@ -210,7 +200,7 @@ export class JsiSkImageFilterFactory
     _builder: SkRuntimeShaderBuilder,
     _childShaderName: string | null,
     _input: SkImageFilter | null
-  ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  ) {
+    return throwNotImplementedOnRNWeb<SkImageFilter>();
   }
 }