@react-native-harness/jest 1.0.0-alpha.23 → 1.0.0-alpha.25

package/eslint.config.mjs

@@ -8,9 +8,12 @@ export default [
       '@nx/dependency-checks': [
         'error',
         {
-          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}',
+            '{projectRoot}/vite.config.{js,cjs,mjs,ts,cts,mts}',
+          ],
           // jest-runner: we only ingest types
-          ignoredDependencies: ['@react-native-harness/cli', 'jest-runner'],
+          ignoredDependencies: ['@react-native-harness/cli', 'jest-runner', 'vitest'],
         },
       ],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-harness/jest",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.25",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -40,11 +40,11 @@
     "p-limit": "^7.1.1",
     "tslib": "^2.3.0",
     "yargs": "^17.7.2",
-    "@react-native-harness/bridge": "1.0.0-alpha.23",
-    "@react-native-harness/bundler-metro": "1.0.0-alpha.23",
-    "@react-native-harness/config": "1.0.0-alpha.23",
-    "@react-native-harness/tools": "1.0.0-alpha.23",
-    "@react-native-harness/platforms": "1.0.0-alpha.23"
+    "@react-native-harness/bridge": "1.0.0-alpha.25",
+    "@react-native-harness/bundler-metro": "1.0.0-alpha.25",
+    "@react-native-harness/config": "1.0.0-alpha.25",
+    "@react-native-harness/platforms": "1.0.0-alpha.25",
+    "@react-native-harness/tools": "1.0.0-alpha.25"
   },
   "devDependencies": {
     "@types/yargs": "^17.0.32",

package/src/__tests__/client-log-handler.test.ts

@@ -0,0 +1,328 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  formatClientLogMessage,
+  formatClientLogLine,
+  handleClientLogEvent,
+  createClientLogListener,
+  type ClientLogEvent,
+} from '../client-log-handler.js';
+
+// Mock the log function
+vi.mock('../logs.js', () => ({
+  log: vi.fn(),
+}));
+
+import { log } from '../logs.js';
+
+describe('client-log-handler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('formatClientLogMessage', () => {
+    it('should format a single string', () => {
+      const result = formatClientLogMessage(['Hello, world!']);
+      expect(result).toBe('Hello, world!');
+    });
+
+    it('should join multiple strings with spaces', () => {
+      const result = formatClientLogMessage(['Hello', 'world', '!']);
+      expect(result).toBe('Hello world !');
+    });
+
+    it('should format objects', () => {
+      const result = formatClientLogMessage([{ key: 'value' }]);
+      // util.format uses inspect-style output for objects
+      expect(result).toContain('key');
+      expect(result).toContain('value');
+    });
+
+    it('should format arrays', () => {
+      const result = formatClientLogMessage([[1, 2, 3]]);
+      expect(result).toContain('1');
+      expect(result).toContain('2');
+      expect(result).toContain('3');
+    });
+
+    it('should handle mixed types', () => {
+      const result = formatClientLogMessage([
+        'Message:',
+        { count: 42 },
+        'items',
+      ]);
+      expect(result).toContain('Message:');
+      expect(result).toContain('count');
+      expect(result).toContain('42');
+      expect(result).toContain('items');
+    });
+
+    it('should format numbers', () => {
+      const result = formatClientLogMessage([123, 456]);
+      expect(result).toBe('123 456');
+    });
+
+    it('should format booleans', () => {
+      const result = formatClientLogMessage([true, false]);
+      expect(result).toBe('true false');
+    });
+
+    it('should format null and undefined', () => {
+      const result = formatClientLogMessage([null, undefined]);
+      expect(result).toBe('null undefined');
+    });
+
+    it('should handle empty array', () => {
+      const result = formatClientLogMessage([]);
+      expect(result).toBe('');
+    });
+
+    describe('printf-style format specifiers', () => {
+      it('should handle %s string substitution', () => {
+        const result = formatClientLogMessage(['%s world', 'hello']);
+        expect(result).toBe('hello world');
+      });
+
+      it('should handle %d integer substitution', () => {
+        const result = formatClientLogMessage(['Count: %d', 42]);
+        expect(result).toBe('Count: 42');
+      });
+
+      it('should handle %i integer substitution', () => {
+        const result = formatClientLogMessage(['Value: %i', 123]);
+        expect(result).toBe('Value: 123');
+      });
+
+      it('should handle %f float substitution', () => {
+        const result = formatClientLogMessage(['Pi: %f', 3.14159]);
+        expect(result).toContain('3.14159');
+      });
+
+      it('should handle multiple substitutions', () => {
+        const result = formatClientLogMessage(['Hello %s, you have %d messages', 'Alice', 5]);
+        expect(result).toBe('Hello Alice, you have 5 messages');
+      });
+
+      it('should handle %j JSON substitution', () => {
+        const result = formatClientLogMessage(['Data: %j', { key: 'value' }]);
+        expect(result).toBe('Data: {"key":"value"}');
+      });
+
+      it('should handle %o object substitution', () => {
+        const result = formatClientLogMessage(['Object: %o', { a: 1 }]);
+        // %o produces inspect-style output, just check it contains the key
+        expect(result).toContain('a');
+      });
+
+      it('should handle %% as literal percent when substituting', () => {
+        // %% is only converted to % when there are substitutions
+        const result = formatClientLogMessage(['%s is 100%% complete', 'Task']);
+        expect(result).toBe('Task is 100% complete');
+      });
+
+      it('should append extra arguments after substitution', () => {
+        const result = formatClientLogMessage(['Hello %s', 'world', 'extra', 'args']);
+        expect(result).toBe('Hello world extra args');
+      });
+    });
+  });
+
+  describe('formatClientLogLine', () => {
+    it('should format log level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'log',
+        data: ['Test message'],
+      };
+      const result = formatClientLogLine(event);
+      // The result will contain ANSI codes for styling, so we check it contains the message
+      expect(result).toContain('Test message');
+    });
+
+    it('should format error level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'error',
+        data: ['Error occurred'],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('Error occurred');
+    });
+
+    it('should format warn level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'warn',
+        data: ['Warning message'],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('Warning message');
+    });
+
+    it('should format info level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'info',
+        data: ['Info message'],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('Info message');
+    });
+
+    it('should format debug level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'debug',
+        data: ['Debug message'],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('Debug message');
+    });
+
+    it('should format trace level event', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'trace',
+        data: ['Trace message'],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('Trace message');
+    });
+
+    it('should handle multiple data items', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'log',
+        data: ['User:', { id: 1, name: 'Test' }],
+      };
+      const result = formatClientLogLine(event);
+      expect(result).toContain('User:');
+      expect(result).toContain('id');
+      expect(result).toContain('Test');
+    });
+  });
+
+  describe('handleClientLogEvent', () => {
+    it('should handle client_log events and call log', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'log',
+        data: ['Test message'],
+      };
+
+      const result = handleClientLogEvent(event);
+
+      expect(result).toBe(true);
+      expect(log).toHaveBeenCalledTimes(1);
+      expect(log).toHaveBeenCalledWith(expect.stringContaining('Test message'));
+    });
+
+    it('should return false for non-client_log events', () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const event = { type: 'bundle_build_started' } as any;
+
+      const result = handleClientLogEvent(event);
+
+      expect(result).toBe(false);
+      expect(log).not.toHaveBeenCalled();
+    });
+
+    it('should handle error level logs', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'error',
+        data: ['Something went wrong'],
+      };
+
+      handleClientLogEvent(event);
+
+      expect(log).toHaveBeenCalledWith(
+        expect.stringContaining('Something went wrong')
+      );
+    });
+
+    it('should handle warn level logs', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'warn',
+        data: ['Deprecation warning'],
+      };
+
+      handleClientLogEvent(event);
+
+      expect(log).toHaveBeenCalledWith(
+        expect.stringContaining('Deprecation warning')
+      );
+    });
+  });
+
+  describe('createClientLogListener', () => {
+    it('should create a listener function', () => {
+      const listener = createClientLogListener();
+      expect(typeof listener).toBe('function');
+    });
+
+    it('should handle client_log events when called', () => {
+      const listener = createClientLogListener();
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'info',
+        data: ['Listener test'],
+      };
+
+      listener(event);
+
+      expect(log).toHaveBeenCalledWith(expect.stringContaining('Listener test'));
+    });
+
+    it('should ignore non-client_log events', () => {
+      const listener = createClientLogListener();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const event = { type: 'initialize_done' } as any;
+
+      listener(event);
+
+      expect(log).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('group events', () => {
+    it('should handle group events without logging', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'group',
+        data: ['Group label'],
+      };
+
+      const result = handleClientLogEvent(event);
+
+      expect(result).toBe(true);
+      expect(log).not.toHaveBeenCalled();
+    });
+
+    it('should handle groupCollapsed events without logging', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'groupCollapsed',
+        data: ['Collapsed'],
+      };
+
+      const result = handleClientLogEvent(event);
+
+      expect(result).toBe(true);
+      expect(log).not.toHaveBeenCalled();
+    });
+
+    it('should handle groupEnd events without logging', () => {
+      const event: ClientLogEvent = {
+        type: 'client_log',
+        level: 'groupEnd',
+        data: [],
+      };
+
+      const result = handleClientLogEvent(event);
+
+      expect(result).toBe(true);
+      expect(log).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/client-log-handler.ts

@@ -0,0 +1,101 @@
+import type { ReportableEvent } from '@react-native-harness/bundler-metro';
+import chalk from 'chalk';
+import util from 'node:util';
+import { log } from './logs.js';
+
+export type ClientLogEvent = Extract<ReportableEvent, { type: 'client_log' }>;
+
+type LogLevel = ClientLogEvent['level'];
+
+/**
+ * Gets the display level for a log level.
+ * Note: Metro treats 'trace' as 'log' because Hermes doesn't include stack traces.
+ */
+const getDisplayLevel = (level: LogLevel): string => {
+  // Metro converts trace to log for display (Hermes doesn't provide stack traces)
+  if (level === 'trace') {
+    return 'LOG';
+  }
+  return level.toUpperCase();
+};
+
+/**
+ * Creates a styled tag for a log level with colored box appearance.
+ */
+const createLevelTag = (level: LogLevel): string => {
+  const displayLevel = getDisplayLevel(level);
+  const label = ` ${displayLevel} `;
+
+  if (!chalk.supportsColor) {
+    return `[${displayLevel}]`;
+  }
+
+  switch (level) {
+    case 'error':
+      return chalk.reset.inverse.bold.red(label);
+    case 'warn':
+      return chalk.reset.inverse.bold.yellow(label);
+    case 'info':
+      return chalk.reset.inverse.bold.cyan(label);
+    case 'debug':
+      return chalk.reset.inverse.bold.blue(label);
+    case 'trace':
+      // Trace displays as LOG but with a distinct color
+      return chalk.reset.inverse.bold.magenta(label);
+    case 'log':
+    default:
+      return chalk.reset.inverse.bold.white(label);
+  }
+};
+
+/**
+ * Formats a client log event data array into a string message.
+ * Uses util.format for printf-style format specifier support (%s, %d, %j, etc.)
+ */
+export const formatClientLogMessage = (data: unknown[]): string => {
+  if (data.length === 0) {
+    return '';
+  }
+  return util.format(...data);
+};
+
+/**
+ * Formats a client log event into a log line with styled level prefix.
+ */
+export const formatClientLogLine = (event: ClientLogEvent): string => {
+  const tag = createLevelTag(event.level);
+  const message = formatClientLogMessage(event.data);
+  return `${tag} ${message}`;
+};
+
+/**
+ * Handles a client_log event by formatting and logging it.
+ * Returns true if the event was handled, false otherwise.
+ */
+export const handleClientLogEvent = (event: ReportableEvent): boolean => {
+  if (event.type !== 'client_log') {
+    return false;
+  }
+
+  // Skip group events - they don't produce output
+  if (
+    event.level === 'group' ||
+    event.level === 'groupCollapsed' ||
+    event.level === 'groupEnd'
+  ) {
+    return true;
+  }
+
+  const logLine = formatClientLogLine(event);
+  log(logLine);
+  return true;
+};
+
+/**
+ * Creates a client log event listener that can be added to the Metro reporter.
+ */
+export const createClientLogListener = (): ((event: ReportableEvent) => void) => {
+  return (event: ReportableEvent) => {
+    handleClientLogEvent(event);
+  };
+};

package/src/harness.ts

@@ -13,12 +13,15 @@ import {
 } from '@react-native-harness/platforms';
 import {
   getMetroInstance,
+  prewarmMetroBundle,
   Reporter,
   ReportableEvent,
 } from '@react-native-harness/bundler-metro';
 import { InitializationTimeoutError, MaxAppRestartsError } from './errors.js';
 import { Config as HarnessConfig } from '@react-native-harness/config';
 import { createCrashMonitor, CrashMonitor } from './crash-monitor.js';
+import { createClientLogListener } from './client-log-handler.js';
+import { logMetroPrewarmCompleted } from './logs.js';
 
 export type HarnessRunTestsOptions = Exclude<TestExecutionOptions, 'platform'>;
 
@@ -144,7 +147,17 @@ const getHarnessInternal = async (
     }),
   ]);
 
+  // Forward client logs to console if enabled
+  const clientLogListener = createClientLogListener();
+
+  if (config.forwardClientLogs) {
+    metroInstance.events.addListener(clientLogListener);
+  }
+
   const dispose = async () => {
+    if (config.forwardClientLogs) {
+      metroInstance.events.removeListener(clientLogListener);
+    }
     await Promise.all([
       serverBridge.dispose(),
       platformInstance.dispose(),
@@ -165,6 +178,16 @@ const getHarnessInternal = async (
   }
 
   try {
+    await prewarmMetroBundle({
+      projectRoot,
+      entryPoint: config.entryPoint,
+      platform: platform.platformId,
+      dev: true,
+      minify: false,
+      signal,
+    });
+    logMetroPrewarmCompleted(platform);
+
     await waitForAppReady({
       metroEvents: metroInstance.events,
       serverBridge,

package/src/logs.ts

@@ -25,6 +25,12 @@ export const logTestEnvironmentReady = (runner: HarnessPlatform): void => {
   log(`${TAG} Runner ${chalk.bold(runner.name)} ready\n`);
 };
 
+export const logMetroPrewarmCompleted = (runner: HarnessPlatform): void => {
+  log(
+    `${TAG} Metro pre-warm for ${chalk.bold(runner.name)} completed\n`
+  );
+};
+
 export const getErrorMessage = (error: HarnessError): string => {
   return `${ERROR_TAG} ${error.message}\n`;
 };

package/src/setup.ts

@@ -68,6 +68,14 @@ export const setup = async (globalConfig: JestConfig.GlobalConfig) => {
     // This is going to be used by @react-native-harness/babel-preset
     // to enable instrumentation of test files.
     process.env.RN_HARNESS_COLLECT_COVERAGE = 'true';
+
+    if (harnessConfig.coverage?.root) {
+      process.env.RN_HARNESS_COVERAGE_ROOT = harnessConfig.coverage.root;
+    }
+  }
+
+  if (harnessConfig.disableViewFlattening) {
+    process.env.RN_HARNESS_VIEW_FLATTENING = 'false';
   }
 
   logTestRunHeader(selectedRunner);

package/vite.config.ts

@@ -0,0 +1,18 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/jest',
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    },
+  },
+}));