feat: auto-inject Harness (#8)

The changes required for Harness to run in the app should be minimal. This pull request updates the way Harness is injected into the app, making it non-intrusive - no changes to the app's code are required.

Author: V3RON

apps/playground/react-native-harness.d.ts

@@ -1,4 +1,6 @@
 const config = {
+  entryPoint: './src/main.tsx',
+  appRegistryComponentName: 'Playground',
   include: ['./src/__tests__/**/*'],
 
   runners: [

apps/playground/rn-harness.config.mjs

@@ -1,7 +1,4 @@
 import { AppRegistry } from 'react-native';
+import App from './app/App';
 
-AppRegistry.registerComponent('Playground', () =>
-  global.RN_HARNESS
-    ? require('react-native-harness').ReactNativeHarness
-    : require('./app/App').default
-);
+AppRegistry.registerComponent('Playground', () => App);

apps/playground/src/main.tsx

@@ -1,13 +1,11 @@
-import globalRnHarnessPlugin from './global-plugin';
 import resolveWeakPlugin from './resolve-weak-plugin';
 
 export const rnHarnessPreset = () => {
-  // Unfortunately, the Babel preset must be enabled at all times (at least for now).
+  if (!process.env.RN_HARNESS) {
+    return {};
+  }
+
   return {
-    plugins: [
-      '@babel/plugin-transform-class-static-block',
-      globalRnHarnessPlugin,
-      resolveWeakPlugin,
-    ],
+    plugins: ['@babel/plugin-transform-class-static-block', resolveWeakPlugin],
   };
 };

packages/babel-preset/src/global-plugin.ts

@@ -59,6 +59,10 @@ export const TestRunnerConfigSchema = z.discriminatedUnion('platform', [
 
 export const ConfigSchema = z
   .object({
+    entryPoint: z.string().min(1, 'Entry point is required'),
+    appRegistryComponentName: z
+      .string()
+      .min(1, 'App registry component name is required'),
     include: z.union([z.string(), z.array(z.string())]).refine(
       (val) => {
         if (Array.isArray(val)) {

packages/babel-preset/src/preset.ts

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { Config as HarnessConfig } from '@react-native-harness/config';
+
+const getManifestContent = (harnessConfig: HarnessConfig): string => {
+  return `global.RN_HARNESS = { appRegistryComponentName: '${harnessConfig.appRegistryComponentName}' };`;
+};
+
+export const getHarnessManifest = (harnessConfig: HarnessConfig): string => {
+  const manifestContent = getManifestContent(harnessConfig);
+  const manifestPath = path.resolve(
+    process.cwd(),
+    'node_modules/.cache/rn-harness/manifest.js'
+  );
+
+  fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+  fs.writeFileSync(manifestPath, manifestContent);
+
+  return manifestPath;
+};

packages/config/src/types.ts

@@ -0,0 +1,35 @@
+import type { MetroConfig } from '@react-native/metro-config';
+import type { Config as HarnessConfig } from '@react-native-harness/config';
+
+type CustomResolver = NonNullable<
+  NonNullable<MetroConfig['resolver']>['resolveRequest']
+>;
+
+export const getHarnessResolver = (
+  metroConfig: MetroConfig,
+  harnessConfig: HarnessConfig
+): CustomResolver => {
+  // Can be relative to the project root or absolute, need to normalize it
+  const resolvedEntryPointPath = require.resolve(harnessConfig.entryPoint, {
+    paths: [process.cwd()],
+  });
+
+  return (context, moduleName, platform) => {
+    const existingResolver =
+      metroConfig.resolver?.resolveRequest ?? context.resolveRequest;
+    const resolvedModule = existingResolver(context, moduleName, platform);
+
+    // Replace the entry point with Harness
+    if (
+      resolvedModule.type === 'sourceFile' &&
+      resolvedModule.filePath === resolvedEntryPointPath
+    ) {
+      return {
+        type: 'sourceFile',
+        filePath: require.resolve('@react-native-harness/runtime/entry-point'),
+      };
+    }
+
+    return resolvedModule;
+  };
+};

packages/metro/assets/init.js

@@ -1,10 +1,8 @@
 import { MetroConfig } from '@react-native/metro-config';
 import { getConfig } from '@react-native-harness/config';
 import { patchModuleSystem } from './moduleSystem';
-
-export type RnHarnessOptions = {
-  unstable__skipAlreadyIncludedModules?: boolean;
-};
+import { getHarnessResolver } from './resolver';
+import { getHarnessManifest } from './manifest';
 
 export const withRnHarness = async (
   config: MetroConfig | Promise<MetroConfig>
@@ -20,20 +18,24 @@ export const withRnHarness = async (
 
   patchModuleSystem();
 
+  const harnessResolver = getHarnessResolver(metroConfig, harnessConfig);
+  const harnessManifest = getHarnessManifest(harnessConfig);
+
   const patchedConfig: MetroConfig = {
     ...metroConfig,
     cacheVersion: 'react-native-harness',
     serializer: {
       ...metroConfig.serializer,
       getPolyfills: (...args) => [
         ...(metroConfig.serializer?.getPolyfills?.(...args) ?? []),
-        require.resolve('../assets/init.js'),
+        harnessManifest,
       ],
     },
     resolver: {
       ...metroConfig.resolver,
       // Unlock __tests__ directory
       blockList: undefined,
+      resolveRequest: harnessResolver,
     },
   };