@react-native-harness/runtime 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/globals.ts

@@ -1,5 +1,18 @@
+export type HarnessGlobal = {
+  appRegistryComponentName: string;
+  webSocketPort?: number;
+};
+
 declare global {
-  var RN_HARNESS: boolean | undefined;
+  var RN_HARNESS: HarnessGlobal | undefined;
 }
 
-export {};
+export const getHarnessGlobal = (): HarnessGlobal => {
+  const harnessGlobal = global.RN_HARNESS;
+
+  if (!harnessGlobal) {
+    throw new Error('RN_HARNESS global is not set');
+  }
+
+  return harnessGlobal;
+};

package/src/index.ts

@@ -1,3 +1,4 @@
+import './polyfills.js';
 import './globals.d.ts';
 
 export { UI as ReactNativeHarness } from './ui/index.js';
@@ -5,3 +6,6 @@ export * from './spy/index.js';
 export * from './expect/index.js';
 export * from './collector/index.js';
 export * from './mocker/index.js';
+export * from './namespace.js';
+export * from './waitFor.js';
+export * from './render/index.js';

package/src/initialize.ts

@@ -1,22 +1,35 @@
 import { getDeviceDescriptor } from './client/getDeviceDescriptor.js';
 import { getClient } from './client/index.js';
+import { disableHMRWhenReady } from './disableHMRWhenReady.js';
+import { setupJestMock } from './jest-mock.js';
 
 // Polyfill for EventTarget
 const Shim = require('event-target-shim');
 globalThis.Event = Shim.Event;
 globalThis.EventTarget = Shim.EventTarget;
 
+// Setup jest mock to warn users about using Jest APIs
+setupJestMock();
+
 // Turn off LogBox
 const { LogBox } = require('react-native');
 LogBox.ignoreAllLogs(true);
 
 // Turn off HMR
-const HMRClient = require('react-native/Libraries/Utilities/HMRClient');
-HMRClient.setup = () => {
-  // No setup = no HMR
-};
+const HMRClientModule = require('react-native/Libraries/Utilities/HMRClient');
+const HMRClient =
+  'default' in HMRClientModule ? HMRClientModule.default : HMRClientModule;
+
+// Wait for HMRClient to be initialized
+setTimeout(() => {
+  void disableHMRWhenReady(() => HMRClient.disable(), 50).then(() =>
+    getClient().then((client) =>
+      client.rpc.reportReady(getDeviceDescriptor())
+    )
+  );
+});
 
-// Initialize the client
-void getClient().then((client) =>
-  client.rpc.reportReady(getDeviceDescriptor())
-);
+// Re-throw fatal errors
+ErrorUtils.setGlobalHandler((error) => {
+  throw error;
+});

package/src/jest-mock.ts

@@ -0,0 +1,32 @@
+// Mock jest global to warn users about using Jest APIs in Harness tests
+export const setupJestMock = (): void => {
+  function throwError(): never {
+    throw new Error(
+      `Jest globals are not available in Harness tests. Import from 'react-native-harness' instead (e.g., import { harness } from 'react-native-harness'; harness.fn())`
+    );
+  }
+
+  const jestMock = new Proxy(
+    {},
+    {
+      get() {
+        throwError();
+      },
+      set() {
+        throwError();
+      },
+      has() {
+        throwError();
+      },
+      ownKeys() {
+        throwError();
+      },
+    }
+  );
+
+  Object.defineProperty(globalThis, 'jest', {
+    value: jestMock,
+    writable: false,
+    configurable: false,
+  });
+};

package/src/mocker/index.ts

@@ -1 +1,6 @@
-export { mock, requireActual, clearMocks } from './registry.js';
+export {
+  mock,
+  requireActual,
+  unmock,
+  resetModules,
+} from './registry.js';

package/src/mocker/metro-require.d.ts

@@ -2,4 +2,6 @@ import type { Require } from './types.js';
 
 declare global {
   var __r: Require;
+  var __resetAllModules: () => void;
+  var __resetModule: (moduleId: number) => void;
 }

package/src/mocker/registry.ts

@@ -1,36 +1,28 @@
 import { ModuleFactory, ModuleId, Require } from './types.js';
 
+const modulesCache = new Map<number, unknown>();
 const mockRegistry = new Map<number, ModuleFactory>();
-const mockCache = new Map<number, unknown>();
 
 const originalRequire = global.__r;
 
 export const mock = (moduleId: string, factory: ModuleFactory): void => {
-  mockCache.delete(moduleId as unknown as ModuleId);
+  modulesCache.delete(moduleId as unknown as ModuleId);
   mockRegistry.set(moduleId as unknown as ModuleId, factory);
 };
 
-export const clearMocks = (): void => {
-  mockRegistry.clear();
-  mockCache.clear();
-};
-
-export const getMockRegistry = (): Map<number, ModuleFactory> => {
-  return mockRegistry;
+const isModuleMocked = (moduleId: number): boolean => {
+  return mockRegistry.has(moduleId);
 };
 
-export const getMockImplementation = (moduleId: number): unknown | null => {
-  if (mockCache.has(moduleId)) {
-    return mockCache.get(moduleId);
-  }
-
+const getMockImplementation = (moduleId: number): unknown | null => {
   const factory = mockRegistry.get(moduleId);
+  
   if (!factory) {
     return null;
   }
 
   const implementation = factory();
-  mockCache.set(moduleId, implementation);
+  modulesCache.set(moduleId, implementation);
   return implementation;
 };
 
@@ -39,15 +31,34 @@ export const requireActual = <T = any>(moduleId: string): T =>
   // babel plugin will transform 'moduleId' to a number
   originalRequire(moduleId as unknown as ModuleId) as T;
 
+export const unmock = (moduleId: string) => {
+  mockRegistry.delete(moduleId as unknown as ModuleId);
+  modulesCache.delete(moduleId as unknown as ModuleId);
+};
+
+export const resetModules = (): void => {
+  modulesCache.clear();
+  mockRegistry.clear();
+};
+
 const mockRequire = (moduleId: string) => {
   // babel plugin will transform 'moduleId' to a number
-  const mockedModule = getMockImplementation(moduleId as unknown as ModuleId);
+  const moduleIdNumber = moduleId as unknown as ModuleId;
+  const cachedModule = modulesCache.get(moduleIdNumber);
+
+  if (cachedModule) {
+    return cachedModule;
+  }
 
-  if (mockedModule) {
+  if (isModuleMocked(moduleIdNumber)) {
+    const mockedModule = getMockImplementation(moduleIdNumber);
+    modulesCache.set(moduleIdNumber, mockedModule);
     return mockedModule;
   }
 
-  return originalRequire(moduleId as unknown as ModuleId);
+  const originalModule = originalRequire(moduleIdNumber);
+  modulesCache.set(moduleIdNumber, originalModule);
+  return originalModule;
 };
 
 Object.setPrototypeOf(mockRequire, Object.getPrototypeOf(originalRequire));

package/src/namespace.ts

@@ -0,0 +1,41 @@
+import {
+  spyOn,
+  fn,
+  clearAllMocks,
+  resetAllMocks,
+  restoreAllMocks,
+} from './spy/index.js';
+import { mock, unmock, requireActual, resetModules } from './mocker/index.js';
+import { waitFor, waitUntil } from './waitFor.js';
+
+export type HarnessNamespace = {
+  spyOn: typeof spyOn;
+  fn: typeof fn;
+  mock: typeof mock;
+  unmock: typeof unmock;
+  requireActual: typeof requireActual;
+  clearAllMocks: typeof clearAllMocks;
+  resetAllMocks: typeof resetAllMocks;
+  restoreAllMocks: typeof restoreAllMocks;
+  resetModules: typeof resetModules;
+  waitFor: typeof waitFor;
+  waitUntil: typeof waitUntil;
+};
+
+const createHarnessNamespace = (): HarnessNamespace => {
+  return {
+    spyOn,
+    fn,
+    mock,
+    unmock,
+    requireActual,
+    clearAllMocks,
+    resetAllMocks,
+    restoreAllMocks,
+    resetModules,
+    waitFor,
+    waitUntil,
+  };
+};
+
+export const harness = createHarnessNamespace();

package/src/polyfills.ts

@@ -0,0 +1,14 @@
+/**
+ * Polyfills for ES2022+ features not supported by JSC (JavaScriptCore).
+ *
+ * JSC, used in React Native when Hermes is disabled, doesn't support
+ * Object.hasOwn (ES2022). This causes runtime errors when @vitest/expect
+ * v4.x initializes.
+ *
+ * This polyfill must be loaded before any code that uses Object.hasOwn.
+ */
+
+if (typeof Object.hasOwn !== 'function') {
+  Object.hasOwn = (obj: object, prop: PropertyKey): boolean =>
+    Object.prototype.hasOwnProperty.call(obj, prop);
+}

package/src/react-native.d.ts

@@ -7,10 +7,39 @@ declare module 'react-native/Libraries/Core/Devtools/getDevServer' {
   export default function getDevServer(): DevServerInfo;
 }
 
-declare global {
-  var __r:
-    | {
-        (moduleId: number): unknown;
-      }
-    | undefined;
+declare module 'react-native/Libraries/Core/Devtools/symbolicateStackTrace' {
+  import { StackFrame } from 'react-native/Libraries/Core/Devtools/parseErrorStack';
+
+  export type CodeFrame = Readonly<{
+    content: string;
+    location:
+      | {
+          row: number;
+          column: number;
+          [key: string]: unknown;
+        }
+      | null
+      | undefined;
+    fileName: string;
+  }>;
+
+  export type SymbolicatedStackTrace = Readonly<{
+    stack: ReadonlyArray<StackFrame>;
+    codeFrame: CodeFrame | null | undefined;
+  }>;
+
+  export default function symbolicateStackTrace(
+    stack: ReadonlyArray<StackFrame>,
+    extraData?: unknown
+  ): Promise<SymbolicatedStackTrace>;
+}
+
+declare module 'react-native/Libraries/Core/Devtools/parseErrorStack' {
+  export type StackFrame = {
+    column: number | null | undefined;
+    file: string | null | undefined;
+    lineNumber: number | null | undefined;
+    methodName: string;
+  };
+  export default function parseErrorStack(errorStack?: string): StackFrame[];
 }

package/src/render/ErrorBoundary.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+
+type ErrorBoundaryProps = {
+  children: React.ReactNode;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+  }
+
+  override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    // Reset error state when children change (new component rendered)
+    if (prevProps.children !== this.props.children && this.state.hasError) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  override render(): React.ReactNode {
+    if (this.state.hasError && this.state.error) {
+      return (
+        <View style={styles.errorContainer}>
+          <View style={styles.errorContent}>
+            <Text style={styles.errorTitle}>Component Error</Text>
+            <Text style={styles.errorSubtitle}>
+              The rendered component threw an error:
+            </Text>
+            <ScrollView style={styles.errorScrollView}>
+              <Text style={styles.errorMessage}>
+                {this.state.error.message}
+              </Text>
+              {this.state.error.stack && (
+                <Text style={styles.errorStack}>{this.state.error.stack}</Text>
+              )}
+            </ScrollView>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  errorContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(220, 38, 38, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorContent: {
+    backgroundColor: '#1f2937',
+    borderRadius: 12,
+    padding: 20,
+    maxWidth: 500,
+    width: '100%',
+    maxHeight: '80%',
+    borderWidth: 2,
+    borderColor: '#dc2626',
+  },
+  errorTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#dc2626',
+    marginBottom: 8,
+  },
+  errorSubtitle: {
+    fontSize: 14,
+    color: '#9ca3af',
+    marginBottom: 16,
+  },
+  errorScrollView: {
+    maxHeight: 400,
+  },
+  errorMessage: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fca5a5',
+    marginBottom: 12,
+    fontFamily: 'Courier',
+  },
+  errorStack: {
+    fontSize: 12,
+    color: '#d1d5db',
+    fontFamily: 'Courier',
+    lineHeight: 18,
+  },
+});

package/src/render/TestComponentOverlay.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useRenderedElement } from '../ui/state.js';
+import { store } from '../ui/state.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
+
+export const TestComponentOverlay = (): React.ReactElement | null => {
+  const { element, key } = useRenderedElement();
+
+  useEffect(() => {
+    // Call onRenderCallback when element changes
+    const callback = store.getState().onRenderCallback;
+
+    if (callback) {
+      callback();
+      store.getState().setOnRenderCallback(null);
+    }
+  }, [element]);
+
+  if (!element) {
+    return null;
+  }
+
+  const handleLayout = (): void => {
+    const callback = store.getState().onLayoutCallback;
+
+    if (callback) {
+      callback();
+      // Clear the callback after calling it
+      store.getState().setOnLayoutCallback(null);
+    }
+  };
+
+  return (
+    <View key={key} style={styles.overlay} onLayout={handleLayout}>
+      <ErrorBoundary>{element}</ErrorBoundary>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#0a1628',
+    zIndex: 1000,
+  },
+});

package/src/render/cleanup.ts

@@ -0,0 +1,7 @@
+import { store } from '../ui/state.js';
+
+export const cleanup = (): void => {
+  store.getState().setRenderedElement(null);
+  store.getState().setOnLayoutCallback(null);
+  store.getState().setOnRenderCallback(null);
+};

package/src/render/index.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { store } from '../ui/state.js';
+import type { RenderResult, RenderOptions } from './types.js';
+
+const wrapElement = (
+  element: React.ReactElement,
+  wrapper?: React.ComponentType<{ children: React.ReactNode }>
+): React.ReactElement => {
+  if (!wrapper) {
+    return element;
+  }
+  return React.createElement(wrapper, { children: element });
+};
+
+export const render = async (
+  element: React.ReactElement,
+  options: RenderOptions = {}
+): Promise<RenderResult> => {
+  const { timeout = 1000, wrapper } = options;
+
+  // If an element is already rendered, unmount it first
+  if (store.getState().renderedElement !== null) {
+    store.getState().setRenderedElement(null);
+    store.getState().setOnLayoutCallback(null);
+    store.getState().setOnRenderCallback(null);
+  }
+
+  // Create a promise that resolves when the element is laid out
+  const layoutPromise = new Promise<void>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      store.getState().setOnLayoutCallback(null);
+      reject(
+        new Error(`Render timeout: Element did not mount within ${timeout}ms`)
+      );
+    }, timeout);
+
+    store.getState().setOnLayoutCallback(() => {
+      clearTimeout(timeoutId);
+      resolve();
+    });
+  });
+
+  // Wrap and set the element in state (key is generated automatically)
+  const wrappedElement = wrapElement(element, wrapper);
+  store.getState().setRenderedElement(wrappedElement);
+
+  // Wait for layout
+  await layoutPromise;
+
+  const rerender = async (newElement: React.ReactElement): Promise<void> => {
+    if (store.getState().renderedElement === null) {
+      throw new Error('No element is currently rendered. Call render() first.');
+    }
+
+    // Create a promise that resolves when the element is re-rendered
+    const renderPromise = new Promise<void>((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        store.getState().setOnRenderCallback(null);
+        reject(
+          new Error(
+            `Rerender timeout: Element did not update within ${timeout}ms`
+          )
+        );
+      }, timeout);
+
+      store.getState().setOnRenderCallback(() => {
+        clearTimeout(timeoutId);
+        resolve();
+      });
+    });
+
+    const wrappedNewElement = wrapElement(newElement, wrapper);
+    store.getState().updateRenderedElement(wrappedNewElement);
+
+    // Wait for render
+    await renderPromise;
+  };
+
+  const unmount = (): void => {
+    if (store.getState().renderedElement === null) {
+      return;
+    }
+
+    store.getState().setRenderedElement(null);
+    store.getState().setOnLayoutCallback(null);
+    store.getState().setOnRenderCallback(null);
+  };
+
+  return {
+    rerender,
+    unmount,
+  };
+};
+
+export { cleanup } from './cleanup.js';
+export type { RenderResult, RenderOptions } from './types.js';

package/src/render/setup.ts

@@ -0,0 +1,8 @@
+import { afterEach } from '../collector/functions.js';
+import { cleanup } from './cleanup.js';
+
+export const setup = () => {
+  afterEach(() => {
+    cleanup();
+  });
+};

package/src/render/types.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+export type RenderResult = {
+  rerender: (element: React.ReactElement) => Promise<void>;
+  unmount: () => void;
+};
+
+export type RenderOptions = {
+  timeout?: number;
+  wrapper?: React.ComponentType<{ children: React.ReactNode }>;
+};

package/src/runner/errors.ts

@@ -1,17 +1,26 @@
-import type { SerializedError } from '@react-native-harness/bridge';
+import type { SerializedError, CodeFrame } from '@react-native-harness/bridge';
+import { getCodeFrame } from '../symbolicate.js';
 
 export class TestExecutionError extends Error {
   file: string;
   suite: string;
   test: string;
+  codeFrame?: CodeFrame;
 
-  constructor(error: unknown, file: string, suite: string, test: string) {
+  constructor(
+    error: unknown,
+    file: string,
+    suite: string,
+    test: string,
+    codeFrame?: CodeFrame
+  ) {
     super('Test execution error');
     this.name = 'TestExecutionError';
     this.file = file;
     this.suite = suite;
     this.test = test;
     this.cause = error;
+    this.codeFrame = codeFrame;
   }
 
   toSerializedJSON(): SerializedError {
@@ -19,13 +28,34 @@ export class TestExecutionError extends Error {
       this.cause instanceof Error ? this.cause.name : 'Unknown name';
     const causeMessage =
       this.cause instanceof Error ? this.cause.message : 'Unknown message';
-    const causeStack =
-      this.cause instanceof Error ? this.cause.stack : undefined;
+    const causeCodeFrame = this.codeFrame;
 
     return {
       name: causeName,
       message: causeMessage,
-      stack: causeStack,
+      codeFrame: causeCodeFrame,
     };
   }
 }
+
+export const getTestExecutionError = async (
+  error: unknown,
+  file: string,
+  suite: string,
+  test: string
+): Promise<TestExecutionError> => {
+  try {
+    if (error instanceof Error) {
+      const codeFrame = await getCodeFrame(error);
+
+      if (codeFrame) {
+        return new TestExecutionError(error, file, suite, test, codeFrame);
+      }
+    }
+
+    return new TestExecutionError(error, file, suite, test);
+  } catch (error) {
+    // If the stack cannot be symbolicated, return the original error
+    return new TestExecutionError(error, file, suite, test);
+  }
+};

package/src/runner/factory.ts

@@ -9,10 +9,17 @@ export const getTestRunner = (): TestRunner => {
   return {
     events,
     run: async (testSuite, testFilePath) => {
-      return runSuite(testSuite, {
+      const result = await runSuite(testSuite, {
         events,
         testFilePath,
       });
+
+      // If coverage is enabled, there will be a global variable called __coverage__
+      if ('__coverage__' in global && !!global.__coverage__) {
+        result.coverage = global.__coverage__;
+      }
+
+      return result;
     },
     dispose: () => {
       events.clearAllListeners();