@react-native-harness/runtime 1.0.0-canary.1761046904277 → 1.0.0-canary.1761729829908

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