Use the web implementation for mocking (#1494)

docs/docs/getting-started/installation.md

@@ -79,19 +79,15 @@ There is also an [React Native VSCode extension](https://marketplace.visualstudi
 
 ## Testing with Jest
 
-In order to load the mock provided by React Native Skia add following to your jest config:
+React Native Skia test mocks use web implementation which depends on loading CanvasKit. Before you begin using the mocks you need some setup actions.
 
-```js
-"setupFiles": [require.resolve("@shopify/react-native-skia/jestSetup.js")]
-```
-
-Example:
+In order to load CanvasKit and in turn loading the React Native Skia mock, you need to add the following your jest config:
 
 ```js
-module.exports = {
-  "preset": "react-native",
-  "setupFiles": [require.resolve("@shopify/react-native-skia/jestSetup.js")]
-}
+// This is needed to load CanvasKit
+"globalSetup": "@shopify/react-native-skia/globalJestSetup.js", 
+ // This is needed to load the mock
+"setupFiles": ["@shopify/react-native-skia/jestSetup.js"]
 ```
 
 

example/globalJestSetup.js

@@ -0,0 +1,7 @@
+const globalSetup = async () => {
+  const { LoadSkiaWeb } = require("../package/src/web/LoadSkiaWeb");
+  await LoadSkiaWeb();
+};
+
+// eslint-disable-next-line import/no-default-export
+export default globalSetup;

example/jestSetup.js

@@ -0,0 +1,33 @@
+require("react-native-reanimated/lib/commonjs/reanimated2/jestUtils").setUpTests();
+global.__reanimatedWorkletInit = () => {};
+jest.mock("react-native-reanimated", () => {
+  const Reanimated = require("react-native-reanimated/mock");
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+  Reanimated.Extrapolation = {
+    CLAMP: "clamp",
+  };
+  Reanimated.useEvent = () => {};
+  Reanimated.scrollTo = () => {};
+  return Reanimated;
+});
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+jest.mock("@shopify/react-native-skia", () => {
+  return require("../package/src/mock").Mock(global.CanvasKit);
+});
+
+const mockedNavigate = jest.fn();
+
+jest.mock("@react-navigation/native", () => {
+  const actualNav = jest.requireActual("@react-navigation/native");
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});

example/package.json

@@ -19,6 +19,8 @@
     "@react-navigation/native-stack": "6.9.0",
     "@shopify/react-native-skia": "link:../package/",
     "@svgr/webpack": "^6.2.1",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "cdt2d": "^1.0.0",
     "color": "^4.2.1",
@@ -38,7 +40,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@testing-library/react-native": "^10.1.1",
+    "@testing-library/react-native": "12.1.1",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.24",
@@ -79,9 +81,14 @@
       "<rootDir>/lib/typescript",
       "setup.(ts|tsx)$"
     ],
+    "globalSetup": "<rootDir>/globalJestSetup.js",
+    "setupFilesAfterEnv": [
+      "<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js",
+      "<rootDir>/jestSetup.js"
+    ],
     "preset": "react-native",
     "transformIgnorePatterns": [
       "node_modules/(?!(@react-native|react-native|react-native.*|@?react-navigation.*)/)"
     ]
   }
-}
+}

example/src/App.spec.tsx

@@ -5,23 +5,6 @@ import { cleanup, render } from "@testing-library/react-native";
 
 import App from "./App";
 
-jest.mock("react-native-reanimated", () => {
-  const Reanimated = require("react-native-reanimated/mock");
-
-  // The mock for `call` immediately calls the callback which is incorrect
-  // So we override it with a no-op
-  Reanimated.default.call = () => {};
-
-  return Reanimated;
-});
-
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
-
-jest.mock("@shopify/react-native-skia", () => {
-  return require("../../package/src/mock").Mock;
-});
-
 it("renders correctly", () => {
   render(<App />);
 });

example/src/Examples/Examples.test.tsx

@@ -0,0 +1,85 @@
+import "react-native";
+import React from "react";
+// Test renderer must be required after react-native.
+import { cleanup, render } from "@testing-library/react-native";
+
+import { Breathe } from "./Breathe";
+import { Gooey } from "./Gooey";
+import { Aurora } from "./Aurora";
+import { Wallet } from "./Wallet";
+import { Vertices } from "./Vertices";
+import { Severance } from "./Severance";
+import { PerformanceDrawingTest } from "./Performance";
+import { GraphsScreen } from "./Graphs";
+import { SimpleAnimation } from "./Animation/SimpleAnimation";
+import { InterpolationWithEasing } from "./Animation/InterpolationWithEasing";
+import { AnimationWithTouchHandler } from "./Animation/AnimationWithTouchHandler";
+import { Neumorphism } from "./Neumorphism";
+import { Matrix } from "./Matrix";
+import { Hue } from "./Hue";
+import { Glassmorphism } from "./Glassmorphism";
+import { Filters } from "./Filters";
+
+it("should render the Breathe example correctly", () => {
+  render(<Breathe />);
+});
+
+it("should render the Gooey example correctly", () => {
+  render(<Gooey />);
+});
+
+it("should render the Aurora example correctly", () => {
+  render(<Aurora />);
+});
+
+it("should render the Wallet example correctly", () => {
+  render(<Wallet />);
+});
+
+it("should render the Vertices example correctly", () => {
+  render(<Vertices />);
+});
+
+it("should render the Severance example correctly", () => {
+  render(<Severance />);
+});
+
+it("should render the Reanimated example correctly", () => {
+  render(
+    <>
+      <SimpleAnimation />
+      <InterpolationWithEasing />
+      <AnimationWithTouchHandler />
+    </>
+  );
+});
+
+it("should render the Performance example correctly", () => {
+  render(<PerformanceDrawingTest />);
+});
+
+it("should render the Neumorphism example correctly", () => {
+  render(<Neumorphism />);
+});
+
+it("should render the Matrix example correctly", () => {
+  render(<Matrix />);
+});
+
+it("should render the Hue example correctly", () => {
+  render(<Hue />);
+});
+
+it("should render the GraphsScreen example correctly", () => {
+  render(<GraphsScreen />);
+});
+
+it("should render the Glassmorphism example correctly", () => {
+  render(<Glassmorphism />);
+});
+
+it("should render the Filter example correctly", () => {
+  render(<Filters />);
+});
+
+afterEach(cleanup);

example/src/Examples/Reanimated/index.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { Platform, StyleSheet } from "react-native";
-import {
-  GestureHandlerRootView,
-  ScrollView,
-} from "react-native-gesture-handler";
+import { ScrollView } from "react-native-gesture-handler";
 
 import { AnimateTextOnPath } from "./AnimateTextOnPath";
 import { AnimationWithTouchHandler } from "./AnimationWithTouchHandler";
@@ -14,16 +11,14 @@ import { SpringBackTouchAnimation } from "./SpringBackTouch";
 
 export const ReanimatedExample: React.FC = () => {
   return (
-    <GestureHandlerRootView>
-      <ScrollView style={styles.container}>
-        <SimpleAnimation />
-        <InterpolationWithEasing />
-        <AnimationWithTouchHandler />
-        {Platform.OS !== "web" && <AnimateTextOnPath />}
-        <SpringBackTouchAnimation />
-        <BokehExample />
-      </ScrollView>
-    </GestureHandlerRootView>
+    <ScrollView style={styles.container}>
+      <SimpleAnimation />
+      <InterpolationWithEasing />
+      <AnimationWithTouchHandler />
+      {Platform.OS !== "web" && <AnimateTextOnPath />}
+      <SpringBackTouchAnimation />
+      <BokehExample />
+    </ScrollView>
   );
 };