@react-native-harness/runtime 1.0.0-alpha.15 → 1.0.0-alpha.18

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

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

package/src/ui/ReadyScreen.tsx

@@ -1,14 +1,13 @@
 import {
   View,
   Text,
-  Image,
   StyleSheet,
   ActivityIndicator,
   StatusBar,
   Platform,
 } from 'react-native';
-import { LOGO_IMAGE } from '../constants.js';
 import { useRunnerStatus } from './state.js';
+import { TestComponentOverlay } from '../render/TestComponentOverlay.js';
 
 require('../initialize.js');
 
@@ -18,9 +17,6 @@ export const ReadyScreen = () => {
   return (
     <View style={styles.container}>
       <View style={styles.contentContainer}>
-        <View style={styles.logoContainer}>
-          <Image style={styles.logo} source={LOGO_IMAGE} />
-        </View>
         <Text style={styles.title}>React Native Harness</Text>
 
         {status === 'idle' ? (
@@ -44,6 +40,7 @@ export const ReadyScreen = () => {
           </View>
         )}
       </View>
+      <TestComponentOverlay />
     </View>
   );
 };
@@ -77,13 +74,6 @@ const styles = StyleSheet.create({
     shadowRadius: 30,
     maxWidth: 350,
   },
-  logoContainer: {
-    marginBottom: 12,
-  },
-  logo: {
-    width: 128,
-    height: 128,
-  },
   title: {
     fontSize: 28,
     fontWeight: '700',

package/src/ui/WrongEnvironmentScreen.tsx

@@ -1,20 +1,9 @@
-import {
-  View,
-  Text,
-  Image,
-  StyleSheet,
-  Platform,
-  StatusBar,
-} from 'react-native';
-import { LOGO_IMAGE } from '../constants.js';
+import { View, Text, StyleSheet, Platform, StatusBar } from 'react-native';
 
 export const WrongEnvironmentScreen = () => {
   return (
     <View style={styles.container}>
       <View style={styles.contentContainer}>
-        <View style={styles.logoContainer}>
-          <Image style={styles.logo} source={LOGO_IMAGE} />
-        </View>
         <Text style={styles.title}>React Native Harness</Text>
 
         <View style={styles.errorIndicator}>
@@ -59,13 +48,6 @@ const styles = StyleSheet.create({
     shadowRadius: 30,
     maxWidth: 350,
   },
-  logoContainer: {
-    marginBottom: 12,
-  },
-  logo: {
-    width: 128,
-    height: 128,
-  },
   title: {
     fontSize: 28,
     fontWeight: '700',

package/src/ui/state.ts

@@ -1,13 +1,52 @@
 import { create, useStore } from 'zustand/react';
+import type React from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+
+const generateRenderKey = (): string => {
+  return `render-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+};
 
 export type RunnerState = {
   status: 'loading' | 'idle' | 'running';
   setStatus: (status: 'loading' | 'idle' | 'running') => void;
+  renderedElement: React.ReactElement | null;
+  setRenderedElement: (element: React.ReactElement | null) => void;
+  updateRenderedElement: (element: React.ReactElement) => void;
+  renderKey: string | null;
+  onLayoutCallback: (() => void) | null;
+  setOnLayoutCallback: (callback: (() => void) | null) => void;
+  onRenderCallback: (() => void) | null;
+  setOnRenderCallback: (callback: (() => void) | null) => void;
 };
 
 export const store = create<RunnerState>((set) => ({
   status: 'loading',
   setStatus: (status) => set({ status }),
+  renderedElement: null,
+  setRenderedElement: (element) =>
+    set({
+      renderedElement: element,
+      renderKey: generateRenderKey(),
+    }),
+  updateRenderedElement: (element) =>
+    set({
+      renderedElement: element,
+    }),
+  renderKey: null,
+  onLayoutCallback: null,
+  setOnLayoutCallback: (callback) => set({ onLayoutCallback: callback }),
+  onRenderCallback: null,
+  setOnRenderCallback: (callback) => set({ onRenderCallback: callback }),
 }));
 
 export const useRunnerStatus = () => useStore(store, (state) => state.status);
+export const useRenderedElement = () =>
+  useStoreWithEqualityFn(
+    store,
+    (state) => ({
+      element: state.renderedElement,
+      key: state.renderKey,
+    }),
+    shallow
+  );