@react-native-harness/runtime 1.0.0-alpha.1

package/src/mocker/registry.ts

@@ -0,0 +1,58 @@
+import { ModuleFactory, ModuleId, Require } from './types.js';
+
+const mockRegistry = new Map<number, ModuleFactory>();
+const mockCache = new Map<number, unknown>();
+
+const originalRequire = global.__r;
+
+export const mock = (moduleId: ModuleId, factory: ModuleFactory): void => {
+  mockCache.delete(moduleId);
+  mockRegistry.set(moduleId, factory);
+};
+
+export const clearMocks = (): void => {
+  mockRegistry.clear();
+  mockCache.clear();
+};
+
+export const getMockRegistry = (): Map<number, ModuleFactory> => {
+  return mockRegistry;
+};
+
+export const getMockImplementation = (moduleId: number): unknown | null => {
+  if (mockCache.has(moduleId)) {
+    return mockCache.get(moduleId);
+  }
+
+  const factory = mockRegistry.get(moduleId);
+  if (!factory) {
+    return null;
+  }
+
+  const implementation = factory();
+  mockCache.set(moduleId, implementation);
+  return implementation;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const requireActual = <T = any>(moduleId: string): T =>
+  // babel plugin will transform 'moduleId' to a number
+  originalRequire(moduleId as unknown as ModuleId) as T;
+
+const mockRequire = (moduleId: string) => {
+  // babel plugin will transform 'moduleId' to a number
+  const mockedModule = getMockImplementation(moduleId as unknown as ModuleId);
+
+  if (mockedModule) {
+    return mockedModule;
+  }
+
+  return originalRequire(moduleId as unknown as ModuleId);
+};
+
+Object.setPrototypeOf(mockRequire, Object.getPrototypeOf(originalRequire));
+Object.defineProperties(
+  mockRequire,
+  Object.getOwnPropertyDescriptors(originalRequire)
+);
+global.__r = mockRequire as unknown as Require;

package/src/mocker/types.ts

@@ -0,0 +1,6 @@
+export type ModuleId = number;
+export type Require = {
+  (moduleId: number): unknown;
+};
+
+export type ModuleFactory = () => unknown;

package/src/react-native.d.ts

@@ -0,0 +1,16 @@
+declare module 'react-native/Libraries/Core/Devtools/getDevServer' {
+  export type DevServerInfo = {
+    url: string;
+    fullBundleUrl?: string;
+    bundleLoadedFromServer: boolean;
+  };
+  export default function getDevServer(): DevServerInfo;
+}
+
+declare global {
+  var __r:
+    | {
+        (moduleId: number): unknown;
+      }
+    | undefined;
+}

package/src/runner/errors.ts

@@ -0,0 +1,31 @@
+import type { SerializedError } from '@react-native-harness/bridge';
+
+export class TestExecutionError extends Error {
+  file: string;
+  suite: string;
+  test: string;
+
+  constructor(error: unknown, file: string, suite: string, test: string) {
+    super('Test execution error');
+    this.name = 'TestExecutionError';
+    this.file = file;
+    this.suite = suite;
+    this.test = test;
+    this.cause = error;
+  }
+
+  toSerializedJSON(): SerializedError {
+    const causeName =
+      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;
+
+    return {
+      name: causeName,
+      message: causeMessage,
+      stack: causeStack,
+    };
+  }
+}

package/src/runner/factory.ts

@@ -0,0 +1,21 @@
+import type { TestRunnerEvents } from '@react-native-harness/bridge';
+import { getEmitter } from '../utils/emitter.js';
+import { runSuite } from './runSuite.js';
+import { TestRunner } from './types.js';
+
+export const getTestRunner = (): TestRunner => {
+  const events = getEmitter<TestRunnerEvents>();
+
+  return {
+    events,
+    run: async (testSuite, testFilePath) => {
+      return runSuite(testSuite, {
+        events,
+        testFilePath,
+      });
+    },
+    dispose: () => {
+      events.clearAllListeners();
+    },
+  };
+};

package/src/runner/hooks.ts

@@ -0,0 +1,51 @@
+import type { TestSuite } from '@react-native-harness/bridge';
+
+export type HookType = 'beforeEach' | 'afterEach' | 'beforeAll' | 'afterAll';
+
+const collectInheritedHooks = (
+  suite: TestSuite,
+  hookType: HookType
+): (() => void | Promise<void>)[] => {
+  const hooks: (() => void | Promise<void>)[] = [];
+  const suiteChain: TestSuite[] = [];
+
+  // Collect all suites from current to root
+  let currentSuite: TestSuite | undefined = suite;
+  while (currentSuite) {
+    suiteChain.push(currentSuite);
+    currentSuite = currentSuite.parent;
+  }
+
+  if (hookType === 'beforeEach' || hookType === 'beforeAll') {
+    // For beforeEach/beforeAll: run parent hooks first (reverse the chain)
+    for (let i = suiteChain.length - 1; i >= 0; i--) {
+      if (hookType === 'beforeEach') {
+        hooks.push(...suiteChain[i].beforeEach);
+      } else {
+        hooks.push(...suiteChain[i].beforeAll);
+      }
+    }
+  } else {
+    // For afterEach/afterAll: run child hooks first (use chain as-is)
+    for (const suiteInChain of suiteChain) {
+      if (hookType === 'afterEach') {
+        hooks.push(...suiteInChain.afterEach);
+      } else {
+        hooks.push(...suiteInChain.afterAll);
+      }
+    }
+  }
+
+  return hooks;
+};
+
+export const runHooks = async (
+  suite: TestSuite,
+  hookType: HookType
+): Promise<void> => {
+  const hooks = collectInheritedHooks(suite, hookType);
+
+  for (const hook of hooks) {
+    await hook();
+  }
+};

package/src/runner/index.ts

@@ -0,0 +1,7 @@
+export type {
+  TestRunnerEventsEmitter,
+  TestRunner,
+  TestRunnerContext,
+} from './types.js';
+export { TestExecutionError } from './errors.js';
+export { getTestRunner } from './factory.js';

package/src/runner/runSuite.ts

@@ -0,0 +1,201 @@
+import type {
+  TestCase,
+  TestResult,
+  TestSuite,
+  TestSuiteResult,
+} from '@react-native-harness/bridge';
+import { runHooks } from './hooks.js';
+import { TestExecutionError } from './errors.js';
+import { TestRunnerContext } from './types.js';
+
+const runTest = async (
+  test: TestCase,
+  suite: TestSuite,
+  context: TestRunnerContext
+): Promise<TestResult> => {
+  const startTime = Date.now();
+
+  // Emit test-started event
+  context.events.emit({
+    type: 'test-started',
+    name: test.name,
+    suite: suite.name,
+    file: context.testFilePath,
+  });
+
+  try {
+    if (test.status === 'skipped') {
+      const result = {
+        name: test.name,
+        status: 'skipped' as const,
+        duration: 0,
+      };
+
+      // Emit test-finished event
+      context.events.emit({
+        type: 'test-finished',
+        name: test.name,
+        suite: suite.name,
+        file: context.testFilePath,
+        duration: 0,
+        status: 'skipped',
+      });
+
+      return result;
+    }
+
+    if (test.status === 'todo') {
+      console.log(`- ${test.name} (todo)`);
+      const result = {
+        name: test.name,
+        status: 'todo' as const,
+        duration: 0,
+      };
+
+      // Emit test-finished event
+      context.events.emit({
+        type: 'test-finished',
+        name: test.name,
+        suite: suite.name,
+        file: context.testFilePath,
+        duration: 0,
+        status: 'todo',
+      });
+
+      return result;
+    }
+
+    // Run all beforeEach hooks from the current suite and its parents
+    await runHooks(suite, 'beforeEach');
+
+    // Run the actual test
+    await test.fn();
+
+    // Run all afterEach hooks from the current suite and its parents
+    await runHooks(suite, 'afterEach');
+
+    const duration = Date.now() - startTime;
+
+    const result = {
+      name: test.name,
+      status: 'passed' as const,
+      duration,
+    };
+
+    // Emit test-finished event
+    context.events.emit({
+      type: 'test-finished',
+      file: context.testFilePath,
+      suite: suite.name,
+      name: test.name,
+      duration,
+      status: 'passed',
+    });
+
+    return result;
+  } catch (error) {
+    const testError = new TestExecutionError(
+      error,
+      context.testFilePath,
+      suite.name,
+      test.name
+    );
+    const duration = Date.now() - startTime;
+
+    const result = {
+      name: test.name,
+      status: 'failed' as const,
+      error: testError.toSerializedJSON(),
+      duration,
+    };
+
+    // Emit test-finished event
+    context.events.emit({
+      type: 'test-finished',
+      file: context.testFilePath,
+      suite: suite.name,
+      name: test.name,
+      duration,
+      error: testError.toSerializedJSON(),
+      status: 'failed',
+    });
+
+    return result;
+  }
+};
+
+export const runSuite = async (
+  suite: TestSuite,
+  context: TestRunnerContext
+): Promise<TestSuiteResult> => {
+  const startTime = Date.now();
+
+  // Emit suite-started event
+  context.events.emit({
+    type: 'suite-started',
+    name: suite.name,
+    file: context.testFilePath,
+  });
+
+  const testResults: TestResult[] = [];
+  const suiteResults: TestSuiteResult[] = [];
+
+  // Run beforeAll hooks
+  await runHooks(suite, 'beforeAll');
+
+  // Run all tests in the current suite
+  for (const test of suite.tests) {
+    const result = await runTest(test, suite, context);
+    testResults.push(result);
+  }
+
+  // Run all child suites
+  for (const childSuite of suite.suites) {
+    const result = await runSuite(childSuite, context);
+    suiteResults.push(result);
+  }
+
+  // Run afterAll hooks
+  await runHooks(suite, 'afterAll');
+
+  const duration = Date.now() - startTime;
+
+  // Determine overall suite status
+  let status: 'passed' | 'failed' | 'skipped' | 'todo' = 'passed';
+
+  // Check if any tests or child suites failed
+  const hasFailedTests = testResults.some(
+    (result) => result.status === 'failed'
+  );
+  const hasFailedSuites = suiteResults.some(
+    (result) => result.status === 'failed'
+  );
+
+  if (hasFailedTests || hasFailedSuites) {
+    status = 'failed';
+  } else if (
+    (testResults.every((result) => result.status === 'skipped') &&
+      suiteResults.every((result) => result.status === 'skipped') &&
+      testResults.length > 0) ||
+    suiteResults.length > 0
+  ) {
+    status = 'skipped';
+  }
+
+  // Emit suite-finished event
+  context.events.emit({
+    type: 'suite-finished',
+    file: context.testFilePath,
+    name: suite.name,
+    duration,
+    status,
+  });
+
+  return {
+    name: suite.name,
+    tests: testResults,
+    suites: suiteResults,
+    status,
+    duration,
+  };
+};

package/src/runner/types.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../utils/emitter.js';
+import type {
+  TestRunnerEvents,
+  TestSuite,
+  TestSuiteResult,
+} from '@react-native-harness/bridge';
+
+export type TestRunnerEventsEmitter = EventEmitter<TestRunnerEvents>;
+
+export type TestRunnerContext = {
+  events: TestRunnerEventsEmitter;
+  testFilePath: string;
+};
+
+export type TestRunner = {
+  events: TestRunnerEventsEmitter;
+  run: (testSuite: TestSuite, testFilePath: string) => Promise<TestSuiteResult>;
+  dispose: () => void;
+};

package/src/spy/index.ts

@@ -0,0 +1,2 @@
+// @vitest/spy is available as a no-dependency package, so we can re-use it in React Native Harness!
+export * from '@vitest/spy';

package/src/ui/ReadyScreen.tsx

@@ -0,0 +1,151 @@
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  ActivityIndicator,
+  StatusBar,
+  Platform,
+} from 'react-native';
+import { LOGO_IMAGE } from '../constants.js';
+import { useRunnerStatus } from './state.js';
+
+require('../initialize.js');
+
+export const ReadyScreen = () => {
+  const status = useRunnerStatus();
+
+  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' ? (
+          <View style={styles.statusIndicator}>
+            <View style={styles.statusDot} />
+            <Text style={styles.statusText}>Idle</Text>
+          </View>
+        ) : status === 'loading' ? (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator
+              size="small"
+              color="#3b82f6"
+              style={styles.loadingSpinner}
+            />
+            <Text style={styles.loadingText}>Loading...</Text>
+          </View>
+        ) : (
+          <View style={styles.statusIndicator}>
+            <View style={styles.statusDot} />
+            <Text style={styles.statusText}>Running...</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0a1628',
+    position: 'relative',
+  },
+  safeArea: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  contentContainer: {
+    alignItems: 'center',
+    padding: 24,
+    borderRadius: 24,
+    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(59, 130, 246, 0.2)',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 30,
+    maxWidth: 350,
+  },
+  logoContainer: {
+    marginBottom: 12,
+  },
+  logo: {
+    width: 128,
+    height: 128,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#38bdf8',
+    textAlign: 'center',
+    letterSpacing: 1,
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: 'rgba(255, 255, 255, 0.7)',
+    textAlign: 'center',
+    letterSpacing: 0.5,
+    marginBottom: 24,
+  },
+  statusIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(34, 211, 238, 0.15)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 36,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(34, 211, 238, 0.4)',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#22d3ee',
+    marginRight: 8,
+    shadowColor: '#22d3ee',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 4,
+  },
+  statusText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#22d3ee',
+    letterSpacing: 0.5,
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(59, 130, 246, 0.15)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 36,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(59, 130, 246, 0.4)',
+  },
+  loadingSpinner: {
+    marginRight: 8,
+  },
+  loadingText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#3b82f6',
+    letterSpacing: 0.5,
+  },
+});

package/src/ui/WrongEnvironmentScreen.tsx

@@ -0,0 +1,113 @@
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Platform,
+  StatusBar,
+} from 'react-native';
+import { LOGO_IMAGE } from '../constants.js';
+
+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}>
+          <View style={styles.errorDot} />
+          <Text style={styles.errorText}>Environment Error</Text>
+        </View>
+        <Text style={styles.submessage}>
+          Please double-check that you followed the installation documentation
+          carefully.
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0a1628',
+    position: 'relative',
+  },
+  safeArea: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  contentContainer: {
+    alignItems: 'center',
+    padding: 24,
+    borderRadius: 24,
+    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(239, 68, 68, 0.2)',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 30,
+    maxWidth: 350,
+  },
+  logoContainer: {
+    marginBottom: 12,
+  },
+  logo: {
+    width: 128,
+    height: 128,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#38bdf8',
+    textAlign: 'center',
+    letterSpacing: 1,
+    marginBottom: 8,
+  },
+  errorIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(239, 68, 68, 0.15)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 36,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(239, 68, 68, 0.4)',
+    marginBottom: 24,
+  },
+  errorDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#ef4444',
+    marginRight: 8,
+    shadowColor: '#ef4444',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 4,
+  },
+  errorText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#ef4444',
+    letterSpacing: 0.5,
+  },
+  submessage: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: 'rgba(255, 255, 255, 0.6)',
+    textAlign: 'center',
+    letterSpacing: 0.5,
+  },
+});

package/src/ui/index.ts

@@ -0,0 +1,3 @@
+export const UI = global.RN_HARNESS
+  ? require('./ReadyScreen').ReadyScreen
+  : require('./WrongEnvironmentScreen').WrongEnvironmentScreen;

package/src/ui/state.ts

@@ -0,0 +1,13 @@
+import { create, useStore } from 'zustand/react';
+
+export type RunnerState = {
+  status: 'loading' | 'idle' | 'running';
+  setStatus: (status: 'loading' | 'idle' | 'running') => void;
+};
+
+export const store = create<RunnerState>((set) => ({
+  status: 'loading',
+  setStatus: (status) => set({ status }),
+}));
+
+export const useRunnerStatus = () => useStore(store, (state) => state.status);