@react-native-harness/runtime 1.0.0-alpha.14 → 1.0.0-alpha.17

package/src/client/setup-files.ts

@@ -0,0 +1,81 @@
+import { EventEmitter } from '../utils/emitter.js';
+import { Bundler } from '../bundler/index.js';
+import { BundlerEvents } from '@react-native-harness/bridge';
+
+export type RunSetupFilesOptions = {
+  setupFiles: string[];
+  setupFilesAfterEnv: string[];
+  events: EventEmitter<BundlerEvents>;
+  bundler: Bundler;
+  evaluateModule: (moduleJs: string, filePath: string) => void;
+};
+
+export const runSetupFiles = async ({
+  setupFiles,
+  setupFilesAfterEnv,
+  events,
+  bundler,
+  evaluateModule,
+}: RunSetupFilesOptions) => {
+  for (const setupFile of setupFiles) {
+    const startTime = Date.now();
+    events.emit({
+      type: 'setup-file-bundling-started',
+      file: setupFile,
+      setupType: 'setupFiles',
+    });
+
+    try {
+      const setupModuleJs = await bundler.getModule(setupFile);
+      events.emit({
+        type: 'setup-file-bundling-finished',
+        file: setupFile,
+        setupType: 'setupFiles',
+        duration: Date.now() - startTime,
+      });
+      evaluateModule(setupModuleJs, setupFile);
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      events.emit({
+        type: 'setup-file-bundling-failed',
+        file: setupFile,
+        setupType: 'setupFiles',
+        duration: Date.now() - startTime,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }
+
+  for (const setupFile of setupFilesAfterEnv) {
+    const startTime = Date.now();
+    events.emit({
+      type: 'setup-file-bundling-started',
+      file: setupFile,
+      setupType: 'setupFilesAfterEnv',
+    });
+
+    try {
+      const setupModuleJs = await bundler.getModule(setupFile);
+      events.emit({
+        type: 'setup-file-bundling-finished',
+        file: setupFile,
+        setupType: 'setupFilesAfterEnv',
+        duration: Date.now() - startTime,
+      });
+      evaluateModule(setupModuleJs, setupFile);
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      events.emit({
+        type: 'setup-file-bundling-failed',
+        file: setupFile,
+        setupType: 'setupFilesAfterEnv',
+        duration: Date.now() - startTime,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }
+};

package/src/collector/functions.ts

@@ -370,11 +370,13 @@ const countTests = (suite: TestSuite): number => {
   return count;
 };
 
-export const collectTests = (fn: () => void): CollectionResult => {
+export const collectTests = async (
+  fn: () => void | Promise<void>
+): Promise<CollectionResult> => {
   currentContext = clearState();
 
   try {
-    fn();
+    await fn();
 
     // Convert raw structure to final structure using computation phase
     const testSuite = convertRawTestSuiteToTestSuite(getRootSuite());

package/src/collector/types.ts

@@ -10,6 +10,9 @@ export type TestCollectorEventsEmitter = EventEmitter<TestCollectorEvents>;
 
 export type TestCollector = {
   events: TestCollectorEventsEmitter;
-  collect: (fn: () => void, testFilePath: string) => Promise<CollectionResult>;
+  collect: (
+    fn: () => void | Promise<void>,
+    testFilePath: string
+  ) => Promise<CollectionResult>;
   dispose: () => void;
 };

package/src/entry-point.ts

@@ -0,0 +1,8 @@
+import { AppRegistry } from 'react-native';
+import { getHarnessGlobal } from './globals.js';
+import { UI } from './ui/index.js';
+
+AppRegistry.registerComponent(
+  getHarnessGlobal().appRegistryComponentName,
+  () => UI
+);

package/src/expect/index.ts

@@ -1,3 +1,6 @@
+// This is adapted version of https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/integrations/chai/index.ts
+// Credits to Vitest team for the original implementation.
+
 import type { Assertion, ExpectStatic, MatcherState } from '@vitest/expect';
 import {
   addCustomEqualityTesters,
@@ -13,13 +16,16 @@ import * as chai from 'chai';
 import './setup.js';
 
 export function createExpect(): ExpectStatic {
-  const expect = ((value: any, message?: string): Assertion => {
+  const expect = ((value: unknown, message?: string): Assertion => {
     const { assertionCalls } = getState(expect);
     setState({ assertionCalls: assertionCalls + 1 }, expect);
     return chai.expect(value, message) as unknown as Assertion;
   }) as ExpectStatic;
   Object.assign(expect, chai.expect);
-  Object.assign(expect, (globalThis as any)[ASYMMETRIC_MATCHERS_OBJECT]);
+  Object.assign(
+    expect,
+    globalThis[ASYMMETRIC_MATCHERS_OBJECT as unknown as keyof typeof globalThis]
+  );
 
   expect.getState = () => getState<MatcherState>(expect);
   expect.setState = (state) => setState(state as Partial<MatcherState>, expect);

package/src/expect/setup.ts

@@ -1,3 +1,6 @@
+// This is adapted version of https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/integrations/chai/setup.ts
+// Credits to Vitest team for the original implementation.
+
 import {
   JestAsymmetricMatchers,
   JestChaiExpect,

package/src/filtering/index.ts

@@ -1 +1,4 @@
-export { filterTestsByName } from './testNameFilter.js';
+export {
+  filterTestsByName,
+  markTestsAsSkippedByName,
+} from './testNameFilter.js';

package/src/filtering/testNameFilter.ts

@@ -2,25 +2,68 @@ import { TestSuite } from '@react-native-harness/bridge';
 
 /**
  * Filters tests by name pattern, matching against test names and suite+test combinations
+ * @deprecated Use markTestsAsSkippedByName instead - this function will be removed in a future version
  */
 export const filterTestsByName = (
-  suite: TestSuite, 
+  suite: TestSuite,
   testNamePattern: string
 ): TestSuite => {
   const regex = new RegExp(testNamePattern);
   return filterSuiteRecursively(suite, regex);
 };
 
+/**
+ * Marks tests as skipped based on name pattern, keeping all tests in the structure
+ * but setting non-matching tests to 'skipped' status
+ */
+export const markTestsAsSkippedByName = (
+  suite: TestSuite,
+  testNamePattern: string
+): TestSuite => {
+  const regex = new RegExp(testNamePattern);
+  return markTestsRecursively(suite, regex);
+};
+
+const markTestsRecursively = (suite: TestSuite, regex: RegExp): TestSuite => {
+  // Mark tests in current suite - skip tests that don't match the pattern
+  const updatedTests = suite.tests.map((test) => {
+    const matches =
+      regex.test(test.name) || regex.test(`${suite.name} ${test.name}`);
+
+    // If test doesn't match pattern and is currently active, mark it as skipped
+    if (!matches && test.status === 'active') {
+      return {
+        ...test,
+        status: 'skipped' as const,
+      };
+    }
+
+    // Keep original status for matching tests or already skipped/todo tests
+    return test;
+  });
+
+  // Recursively process child suites
+  const updatedChildSuites = suite.suites.map((childSuite) =>
+    markTestsRecursively(childSuite, regex)
+  );
+
+  return {
+    ...suite,
+    tests: updatedTests,
+    suites: updatedChildSuites,
+  };
+};
+
 const filterSuiteRecursively = (suite: TestSuite, regex: RegExp): TestSuite => {
   // Filter tests in current suite - match against test name or "suite test" combination
-  const filteredTests = suite.tests.filter(test => 
-    regex.test(test.name) || regex.test(`${suite.name} ${test.name}`)
+  const filteredTests = suite.tests.filter(
+    (test) => regex.test(test.name) || regex.test(`${suite.name} ${test.name}`)
   );
 
   // Recursively filter child suites
   const filteredChildSuites = suite.suites
-    .map(childSuite => filterSuiteRecursively(childSuite, regex))
-    .filter(childSuite => hasAnyActiveTests(childSuite));
+    .map((childSuite) => filterSuiteRecursively(childSuite, regex))
+    .filter((childSuite) => hasAnyActiveTests(childSuite));
 
   return {
     ...suite,
@@ -30,8 +73,10 @@ const filterSuiteRecursively = (suite: TestSuite, regex: RegExp): TestSuite => {
 };
 
 const hasAnyActiveTests = (suite: TestSuite): boolean => {
-  const hasDirectTests = suite.tests.some(test => test.status === 'active');
-  const hasChildTests = suite.suites.some(childSuite => hasAnyActiveTests(childSuite));
-  
+  const hasDirectTests = suite.tests.some((test) => test.status === 'active');
+  const hasChildTests = suite.suites.some((childSuite) =>
+    hasAnyActiveTests(childSuite)
+  );
+
   return hasDirectTests || hasChildTests;
 };

package/src/globals.ts

@@ -1,5 +1,17 @@
+export type HarnessGlobal = {
+  appRegistryComponentName: string;
+};
+
 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

@@ -7,3 +7,4 @@ 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,18 +1,23 @@
 import { getDeviceDescriptor } from './client/getDeviceDescriptor.js';
 import { getClient } from './client/index.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 HMRClientModule = require('react-native/Libraries/Utilities/HMRClient');
-const HMRClient = 'default' in HMRClientModule ? HMRClientModule.default : HMRClientModule;
+const HMRClient =
+  'default' in HMRClientModule ? HMRClientModule.default : HMRClientModule;
 
 // Wait for HMRClient to be initialized
 setTimeout(() => {
@@ -23,3 +28,8 @@ setTimeout(() => {
     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/metro-require.d.ts

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

package/src/react-native.d.ts

@@ -16,7 +16,7 @@ declare module 'react-native/Libraries/Core/Devtools/symbolicateStackTrace' {
       | {
           row: number;
           column: number;
-          [key: string]: any;
+          [key: string]: unknown;
         }
       | null
       | undefined;
@@ -30,7 +30,7 @@ declare module 'react-native/Libraries/Core/Devtools/symbolicateStackTrace' {
 
   export default function symbolicateStackTrace(
     stack: ReadonlyArray<StackFrame>,
-    extraData?: any
+    extraData?: unknown
   ): Promise<SymbolicatedStackTrace>;
 }
 
@@ -43,11 +43,3 @@ declare module 'react-native/Libraries/Core/Devtools/parseErrorStack' {
   };
   export default function parseErrorStack(errorStack?: string): StackFrame[];
 }
-
-declare global {
-  var __r:
-    | {
-        (moduleId: number): unknown;
-      }
-    | undefined;
-}

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/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();