feat: add support for UI components (#17)

This pull request introduces basic support for rendering and interacting with UI views using an RNTL-like API. There's no way to interact with components yet, but you can test how props are handled.

Author: V3RON

apps/playground/src/__tests__/render-jsx.harness.tsx

@@ -0,0 +1,151 @@
+import {
+  describe,
+  it,
+  expect,
+  render,
+  fn,
+  waitFor,
+} from 'react-native-harness';
+import React, { useEffect } from 'react';
+import { View, Text } from 'react-native';
+
+type TestComponentProps = {
+  children?: React.ReactNode;
+  onMount?: () => void;
+  onUnmount?: () => void;
+};
+
+const TestComponent = ({
+  children,
+  onMount,
+  onUnmount,
+}: TestComponentProps) => {
+  useEffect(() => {
+    onMount?.();
+    return () => {
+      onUnmount?.();
+    };
+  }, [onMount, onUnmount]);
+
+  return <View>{children}</View>;
+};
+
+describe('render', () => {
+  it('should mount component when render is called', async () => {
+    const onMount = fn();
+    const onUnmount = fn();
+
+    const { unmount } = await render(
+      <TestComponent onMount={onMount} onUnmount={onUnmount}>
+        <Text>Test</Text>
+      </TestComponent>
+    );
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).toHaveBeenCalledTimes(0);
+
+    unmount();
+  });
+
+  it('should unmount component when unmount is called', async () => {
+    const onMount = fn();
+    const onUnmount = fn();
+
+    const { unmount } = await render(
+      <TestComponent onMount={onMount} onUnmount={onUnmount}>
+        <Text>Test</Text>
+      </TestComponent>
+    );
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).toHaveBeenCalledTimes(0);
+
+    unmount();
+
+    await waitFor(() => {
+      expect(onUnmount).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should not remount component when rerender is called', async () => {
+    const onMount = fn();
+    const onUnmount = fn();
+
+    const { rerender } = await render(
+      <TestComponent onMount={onMount} onUnmount={onUnmount}>
+        <Text>Initial</Text>
+      </TestComponent>
+    );
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).toHaveBeenCalledTimes(0);
+
+    await rerender(
+      <TestComponent onMount={onMount} onUnmount={onUnmount}>
+        <Text>Updated</Text>
+      </TestComponent>
+    );
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).toHaveBeenCalledTimes(0);
+  });
+
+  it('should mount wrapper when render with wrapper is called', async () => {
+    const onWrapperMount = fn();
+    const onWrapperUnmount = fn();
+
+    const { unmount } = await render(<Text>Child</Text>, {
+      wrapper: ({ children }) => (
+        <TestComponent onMount={onWrapperMount} onUnmount={onWrapperUnmount}>
+          {children}
+        </TestComponent>
+      ),
+    });
+
+    expect(onWrapperMount).toHaveBeenCalledTimes(1);
+    expect(onWrapperUnmount).toHaveBeenCalledTimes(0);
+
+    unmount();
+  });
+
+  it('should unmount wrapper when unmount is called', async () => {
+    const onWrapperMount = fn();
+    const onWrapperUnmount = fn();
+
+    const { unmount } = await render(<Text>Child</Text>, {
+      wrapper: ({ children }) => (
+        <TestComponent onMount={onWrapperMount} onUnmount={onWrapperUnmount}>
+          {children}
+        </TestComponent>
+      ),
+    });
+
+    expect(onWrapperMount).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    await waitFor(() => {
+      expect(onWrapperUnmount).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should not remount wrapper when component is rerendered', async () => {
+    const onWrapperMount = fn();
+    const onWrapperUnmount = fn();
+
+    const { rerender } = await render(<Text>Initial</Text>, {
+      wrapper: ({ children }) => (
+        <TestComponent onMount={onWrapperMount} onUnmount={onWrapperUnmount}>
+          {children}
+        </TestComponent>
+      ),
+    });
+
+    expect(onWrapperMount).toHaveBeenCalledTimes(1);
+
+    await rerender(<Text>Updated</Text>);
+
+    expect(onWrapperMount).toHaveBeenCalledTimes(1);
+    expect(onWrapperUnmount).toHaveBeenCalledTimes(0);
+  });
+});

packages/runtime/src/client/factory.ts

@@ -12,6 +12,7 @@ import { combineEventEmitters, EventEmitter } from '../utils/emitter.js';
 import { getWSServer } from './getWSServer.js';
 import { getBundler, evaluateModule, Bundler } from '../bundler/index.js';
 import { markTestsAsSkippedByName } from '../filtering/index.js';
+import { setup } from '../render/setup.js';
 
 export const getClient = async () => {
   const client = await getBridgeClient(getWSServer(), {
@@ -119,10 +120,11 @@ export const getClient = async () => {
       }
 
       const moduleJs = await bundler.getModule(path);
-      const collectionResult = await collector.collect(
-        () => evaluateModule(moduleJs, path),
-        path
-      );
+      const collectionResult = await collector.collect(() => {
+        // Setup automatic cleanup for rendered components
+        setup();
+        evaluateModule(moduleJs, path);
+      }, path);
 
       // Apply test name pattern by marking non-matching tests as skipped
       const processedTestSuite = options.testNamePattern

packages/runtime/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';

packages/runtime/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,
+  },
+});

packages/runtime/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,
+  },
+});

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