@react-native-harness/runtime 1.1.0-rc.4 → 1.2.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-native-harness/runtime",
   "description": "The core test runtime that executes on React Native devices, providing Jest-compatible APIs (describe, it, expect) and managing test collection, execution, and result reporting in native environments.",
-  "version": "1.1.0-rc.4",
+  "version": "1.2.0-rc.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,7 +47,7 @@
     "react-native-url-polyfill": "^3.0.0",
     "use-sync-external-store": "^1.6.0",
     "zustand": "^5.0.5",
-    "@react-native-harness/bridge": "1.1.0-rc.4"
+    "@react-native-harness/bridge": "1.2.0-rc.1"
   },
   "devDependencies": {
     "@types/chai": "^5.2.2"

package/src/disableHMRWhenReady.test.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { disableHMRWhenReady } from './disableHMRWhenReady.js';
+
+const mocks = vi.hoisted(() => ({
+  Platform: { OS: 'android' },
+}));
+
+vi.mock('react-native', () => ({
+  Platform: mocks.Platform,
+}));
+
+describe('disableHMRWhenReady', () => {
+  beforeEach(() => {
+    mocks.Platform.OS = 'android';
+  });
+
+  it('resolves when HMR setup never becomes available', async () => {
+    const disable = vi.fn(() => {
+      throw new Error('Expected HMRClient.setup() call at startup.');
+    });
+
+    await expect(disableHMRWhenReady(disable, 2, 0)).resolves.toBeUndefined();
+    expect(disable).toHaveBeenCalledTimes(3);
+  });
+
+  it('rejects unexpected disable errors', async () => {
+    const error = new Error('boom');
+    const disable = vi.fn(() => {
+      throw error;
+    });
+
+    await expect(disableHMRWhenReady(disable, 2, 0)).rejects.toBe(error);
+  });
+
+  it('skips disabling HMR on web', async () => {
+    mocks.Platform.OS = 'web';
+    const disable = vi.fn();
+
+    await expect(disableHMRWhenReady(disable, 2, 0)).resolves.toBeUndefined();
+    expect(disable).not.toHaveBeenCalled();
+  });
+});

package/src/disableHMRWhenReady.ts

@@ -1,9 +1,11 @@
-import { Platform } from "react-native";
+import { Platform } from 'react-native';
+
+const HMR_SETUP_ERROR = 'Expected HMRClient.setup() call at startup.';
 
 export function disableHMRWhenReady(
   disable: () => void,
   retriesLeft: number,
-  retryDelay = 10
+  retryDelay = 10,
 ) {
   return new Promise<void>((resolve, reject) => {
     if (Platform.OS === 'web') {
@@ -17,15 +19,21 @@ export function disableHMRWhenReady(
         disable();
         resolve();
       } catch (error) {
-        if (
-          remaining > 0 &&
-          error instanceof Error &&
-          error.message.includes('Expected HMRClient.setup() call at startup.')
-        ) {
+        const isMissingHMRSetupError =
+          error instanceof Error && error.message.includes(HMR_SETUP_ERROR);
+
+        if (remaining > 0 && isMissingHMRSetupError) {
           setTimeout(() => attempt(remaining - 1), retryDelay);
           return;
         }
 
+        // Expo's metro runtime does not guarantee that React Native's HMRClient
+        // is initialized, so disabling HMR is best-effort in that environment.
+        if (isMissingHMRSetupError) {
+          resolve();
+          return;
+        }
+
         reject(error);
       }
     }

package/src/expect/context.ts

@@ -0,0 +1,30 @@
+type HarnessExpectError = {
+  name?: string;
+  message?: string;
+  stack?: string;
+};
+
+export type HarnessExpectTestState = {
+  result?: {
+    state: 'pass' | 'fail';
+    errors?: HarnessExpectError[];
+  };
+  promises?: Promise<unknown>[];
+  onFinished?: Array<() => void | Promise<void>>;
+};
+
+declare global {
+  var HARNESS_EXPECT_TEST_STATE: HarnessExpectTestState | undefined;
+}
+
+export const getCurrentExpectTestState = ():
+  | HarnessExpectTestState
+  | undefined => {
+  return globalThis.HARNESS_EXPECT_TEST_STATE;
+};
+
+export const setCurrentExpectTestState = (
+  state: HarnessExpectTestState | undefined,
+): void => {
+  globalThis.HARNESS_EXPECT_TEST_STATE = state;
+};

package/src/expect/errors.ts

@@ -0,0 +1,76 @@
+import type { HarnessExpectTestState } from './context.js';
+
+type SerializedExpectError = {
+  name?: string;
+  message?: string;
+  stack?: string;
+};
+
+const formatErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return `${error.name}: ${error.message}`;
+  }
+
+  if (error && typeof error === 'object') {
+    const maybeError = error as { name?: string; message?: string };
+    if (maybeError.name || maybeError.message) {
+      return [maybeError.name, maybeError.message].filter(Boolean).join(': ');
+    }
+  }
+
+  return String(error);
+};
+
+const createExpectError = (errors: unknown[], title?: string): Error => {
+  const message = [title, ...errors.map(formatErrorMessage)]
+    .filter(Boolean)
+    .join('\n\n');
+
+  const error = new Error(message);
+  const firstError = errors.find(
+    (value): value is SerializedExpectError =>
+      !!value && typeof value === 'object',
+  );
+
+  if (firstError?.name) {
+    error.name = firstError.name;
+  }
+
+  if (firstError?.stack) {
+    error.stack = firstError.stack.replace(
+      /^([^\n]+)(\n|$)/,
+      `${error.name}: ${message}$2`,
+    );
+  }
+
+  return error;
+};
+
+export const flushExpectTestState = async (
+  state: HarnessExpectTestState,
+): Promise<void> => {
+  if (state.promises?.length) {
+    const results = await Promise.allSettled(state.promises);
+    const rejected = results
+      .filter(
+        (result): result is PromiseRejectedResult =>
+          result.status === 'rejected',
+      )
+      .map((result) => result.reason);
+
+    if (rejected.length > 0) {
+      throw createExpectError(rejected);
+    }
+  }
+
+  for (const hook of state.onFinished ?? []) {
+    await hook();
+  }
+
+  const softErrors = state.result?.errors ?? [];
+  if (softErrors.length === 0) {
+    return;
+  }
+
+  throw createExpectError(softErrors, 'Soft assertion failures:');
+};

package/src/expect/expect.ts

@@ -13,6 +13,7 @@ import {
 import * as chai from 'chai';
 
 // Setup additional matchers
+import { getCurrentExpectTestState } from './context.js';
 import './setup.js';
 import { toMatchImageSnapshot } from './matchers/toMatchImageSnapshot.js';
 
@@ -20,12 +21,22 @@ export function createExpect(): ExpectStatic {
   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;
+
+    const assertion = chai.expect(value, message) as unknown as Assertion & {
+      withTest?: (test: unknown) => Assertion;
+    };
+    const currentTest = getCurrentExpectTestState();
+
+    return currentTest && assertion.withTest
+      ? assertion.withTest(currentTest)
+      : assertion;
   }) as ExpectStatic;
   Object.assign(expect, chai.expect);
   Object.assign(
     expect,
-    globalThis[ASYMMETRIC_MATCHERS_OBJECT as unknown as keyof typeof globalThis]
+    globalThis[
+      ASYMMETRIC_MATCHERS_OBJECT as unknown as keyof typeof globalThis
+    ],
   );
 
   expect.getState = () => getState<MatcherState>(expect);
@@ -44,7 +55,7 @@ export function createExpect(): ExpectStatic {
       expectedAssertionsNumber: null,
       expectedAssertionsNumberErrorGen: null,
     },
-    expect
+    expect,
   );
 
   // @ts-expect-error untyped
@@ -62,7 +73,7 @@ export function createExpect(): ExpectStatic {
   // @ts-expect-error untyped
   expect.unreachable = (message?: string) => {
     chai.assert.fail(
-      `expected${message ? ` "${message}" ` : ' '}not to be reached`
+      `expected${message ? ` "${message}" ` : ' '}not to be reached`,
     );
   };
 
@@ -71,7 +82,7 @@ export function createExpect(): ExpectStatic {
       new Error(
         `expected number of assertions to be ${expected}, but got ${
           expect.getState().assertionCalls
-        }`
+        }`,
       );
     if (Error.captureStackTrace) {
       Error.captureStackTrace(errorGen(), assertions);

package/src/index.ts

@@ -1,6 +1,7 @@
 import './polyfills.js';
 import './globals.js';
 
+export { createElement } from './jsx/jsx-runtime.js';
 export { UI as ReactNativeHarness } from './ui/index.js';
 export * from './spy/index.js';
 export * from './expect/index.js';

package/src/initialize.ts

@@ -22,11 +22,17 @@ const HMRClient =
 
 // Wait for HMRClient to be initialized
 setTimeout(() => {
-  void disableHMRWhenReady(() => HMRClient.disable(), 50).then(() =>
-    getClient().then((client) =>
-      client.rpc.reportReady(getDeviceDescriptor())
-    )
-  );
+  void (async () => {
+    try {
+      await disableHMRWhenReady(() => HMRClient.disable(), 50);
+      const client = await getClient();
+
+      const deviceDescriptor = getDeviceDescriptor();
+      await client.rpc.reportReady(deviceDescriptor);
+    } catch (error) {
+      console.error('Failed to initialize React Native Harness', error);
+    }
+  })();
 });
 
 // Re-throw fatal errors

package/src/jsx/jsx-runtime.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { View } from 'react-native';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 import { getHarnessGlobal } from '../globals.js';
@@ -35,4 +36,18 @@ export function jsxs(
   key?: React.Key,
 ): React.ReactElement {
   return wrap(type, props, key, true);
-}
+}
+
+export function createElement(
+  type: React.ElementType,
+  props?: Record<string, unknown> | null,
+  ...children: React.ReactNode[]
+): React.ReactElement {
+  const disableViewFlattening = getHarnessGlobal().disableViewFlattening;
+
+  if (disableViewFlattening && type === View) {
+    props = { ...props, collapsable: false };
+  }
+
+  return React.createElement(type, props, ...children);
+}

package/src/react-native.d.ts

@@ -16,3 +16,17 @@ declare module 'react-native/Libraries/Core/Devtools/parseErrorStack' {
   };
   export default function parseErrorStack(errorStack?: string): StackFrame[];
 }
+
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native';
+
+  const value: ImageSourcePropType;
+  export default value;
+}
+
+declare module '*.jpg' {
+  import type { ImageSourcePropType } from 'react-native';
+
+  const value: ImageSourcePropType;
+  export default value;
+}

package/src/render/TestComponentOverlay.tsx

@@ -52,7 +52,11 @@ export const TestComponentOverlay = (): React.ReactElement | null => {
   };
 
   return (
-    <View key={key} style={styles.overlay} onLayout={handleLayout}>
+    <View
+      key={key}
+      style={[StyleSheet.absoluteFill, styles.overlay]}
+      onLayout={handleLayout}
+    >
       <ErrorBoundary>{element}</ErrorBoundary>
     </View>
   );
@@ -60,7 +64,6 @@ export const TestComponentOverlay = (): React.ReactElement | null => {
 
 const styles = StyleSheet.create({
   overlay: {
-    ...StyleSheet.absoluteFillObject,
     backgroundColor: '#0a1628',
     zIndex: 1000,
   },

package/src/runner/runSuite.ts

@@ -4,6 +4,11 @@ import type {
   TestSuite,
   TestSuiteResult,
 } from '@react-native-harness/bridge';
+import {
+  setCurrentExpectTestState,
+  type HarnessExpectTestState,
+} from '../expect/context.js';
+import { flushExpectTestState } from '../expect/errors.js';
 import { runHooks } from './hooks.js';
 import { getTestExecutionError } from './errors.js';
 import { TestRunnerContext } from './types.js';
@@ -15,7 +20,7 @@ declare global {
 const runTest = async (
   test: TestCase,
   suite: TestSuite,
-  context: TestRunnerContext
+  context: TestRunnerContext,
 ): Promise<TestResult> => {
   const startTime = Date.now();
 
@@ -69,14 +74,23 @@ const runTest = async (
       return result;
     }
 
-    // Run all beforeEach hooks from the current suite and its parents
-    await runHooks(suite, 'beforeEach');
+    const expectTestState: HarnessExpectTestState = {};
+    setCurrentExpectTestState(expectTestState);
 
-    // Run the actual test
-    await test.fn();
+    try {
+      // Run all beforeEach hooks from the current suite and its parents
+      await runHooks(suite, 'beforeEach');
 
-    // Run all afterEach hooks from the current suite and its parents
-    await runHooks(suite, 'afterEach');
+      // Run the actual test
+      await test.fn();
+
+      // Run all afterEach hooks from the current suite and its parents
+      await runHooks(suite, 'afterEach');
+
+      await flushExpectTestState(expectTestState);
+    } finally {
+      setCurrentExpectTestState(undefined);
+    }
 
     const duration = Date.now() - startTime;
 
@@ -102,7 +116,7 @@ const runTest = async (
       error,
       context.testFilePath,
       suite.name,
-      test.name
+      test.name,
     );
     const duration = Date.now() - startTime;
 
@@ -130,7 +144,7 @@ const runTest = async (
 
 export const runSuite = async (
   suite: TestSuite,
-  context: TestRunnerContext
+  context: TestRunnerContext,
 ): Promise<TestSuiteResult> => {
   const startTime = Date.now();
 
@@ -212,10 +226,10 @@ export const runSuite = async (
 
   // Check if any tests or child suites failed
   const hasFailedTests = testResults.some(
-    (result) => result.status === 'failed'
+    (result) => result.status === 'failed',
   );
   const hasFailedSuites = suiteResults.some(
-    (result) => result.status === 'failed'
+    (result) => result.status === 'failed',
   );
 
   if (hasFailedTests || hasFailedSuites) {

package/src/ui/ReadyScreen.tsx

@@ -1,142 +1,22 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  ActivityIndicator,
-  StatusBar,
-  Platform,
-} from 'react-native';
 import { useRunnerStatus } from './state.js';
 import { TestComponentOverlay } from '../render/TestComponentOverlay.js';
+import { RunnerScreen } from './RunnerScreen.js';
 
 require('../initialize.js');
 
 export const ReadyScreen = () => {
   const status = useRunnerStatus();
+  const statusText =
+    status === 'loading'
+      ? 'Loading...'
+      : status === 'idle'
+      ? 'Idle'
+      : 'Running...';
 
   return (
-    <View style={styles.container}>
-      <StatusBar hidden={true} />
-      <View style={styles.contentContainer}>
-        <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>
+    <>
+      <RunnerScreen title="Harness" statusText={statusText} />
       <TestComponentOverlay />
-    </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,
-  },
-  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/RunnerScreen.tsx

@@ -0,0 +1,93 @@
+import {
+  Image,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { CK_LOGO, POWERED_BY } from './images.js';
+
+type RunnerScreenProps = {
+  title: string;
+  statusText: string;
+  message?: string;
+};
+
+export const RunnerScreen = ({
+  title,
+  statusText,
+  message,
+}: RunnerScreenProps) => {
+  return (
+    <View style={styles.container}>
+      <StatusBar hidden={true} />
+      <View style={styles.topSpacer} />
+      <View style={styles.content}>
+        <Image source={{ uri: CK_LOGO }} style={styles.logo} resizeMode="cover" />
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.statusText}>{statusText}</Text>
+        {message ? <Text style={styles.message}>{message}</Text> : null}
+      </View>
+      <View style={styles.footer}>
+        <Image
+          source={{ uri: POWERED_BY }}
+          style={styles.poweredBy}
+          resizeMode="contain"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    paddingVertical: 16,
+  },
+  topSpacer: {
+    minHeight: 16,
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  logo: {
+    width: 64,
+    height: 64,
+    borderRadius: 14,
+  },
+  title: {
+    marginTop: 16,
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#000',
+    textAlign: 'center',
+  },
+  statusText: {
+    marginTop: 12,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+    textAlign: 'center',
+  },
+  message: {
+    marginTop: 12,
+    maxWidth: 320,
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#000',
+    textAlign: 'center',
+  },
+  footer: {
+    padding: 16,
+  },
+  poweredBy: {
+    width: 180,
+    height: 44,
+    opacity: 0.8,
+  },
+});