feat: auto-apply babel plugins (#9)

The changes required for Harness to run in the app should be minimal. This pull request updates how Harness injects Babel plugins into the app. With the addition of a custom transformer, Harness can now inject them automatically, while still falling back to any predefined custom transformer. It works with both the React Native Community CLI and Expo.

Author: V3RON

apps/playground/.babelrc.js

@@ -4,7 +4,6 @@ module.exports = function (api) {
   return {
     presets: [
       ['module:@react-native/babel-preset', { useTransformReactJSX: true }],
-      'react-native-harness/babel-preset',
     ],
   };
 };

packages/babel-preset/src/index.ts

@@ -1,2 +1,3 @@
-import { rnHarnessPreset } from './preset';
+import { rnHarnessPreset, rnHarnessPlugins } from './preset';
 export default rnHarnessPreset;
+export { rnHarnessPlugins };

packages/babel-preset/src/preset.ts

@@ -1,11 +1,16 @@
 import resolveWeakPlugin from './resolve-weak-plugin';
 
+export const rnHarnessPlugins = [
+  '@babel/plugin-transform-class-static-block',
+  resolveWeakPlugin,
+];
+
 export const rnHarnessPreset = () => {
   if (!process.env.RN_HARNESS) {
     return {};
   }
 
   return {
-    plugins: ['@babel/plugin-transform-class-static-block', resolveWeakPlugin],
+    plugins: rnHarnessPlugins,
   };
 };

packages/metro/package.json

@@ -19,7 +19,8 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@react-native-harness/config": "workspace:*"
+    "@react-native-harness/config": "workspace:*",
+    "@react-native-harness/babel-preset": "workspace:*"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5"

packages/metro/src/babel-transformer.ts

@@ -0,0 +1,40 @@
+import type { BabelTransformer } from 'metro-babel-transformer';
+import { rnHarnessPlugins } from '@react-native-harness/babel-preset';
+import { MetroConfig } from '@react-native/metro-config';
+
+export const getHarnessBabelTransformerPath = (
+  metroConfig: MetroConfig
+): string => {
+  const upstreamTransformerPath = metroConfig.transformer?.babelTransformerPath;
+
+  if (!upstreamTransformerPath || typeof upstreamTransformerPath !== 'string') {
+    throw new Error('Upstream transformer path is not a string');
+  }
+
+  process.env.RN_HARNESS_UPSTREAM_TRANSFORMER_PATH = upstreamTransformerPath;
+  return require.resolve('./babel-transformer.js');
+};
+
+const transform: BabelTransformer['transform'] = (args) => {
+  const { plugins } = args;
+  const upstreamTransformerPath =
+    process.env.RN_HARNESS_UPSTREAM_TRANSFORMER_PATH;
+
+  if (!upstreamTransformerPath || typeof upstreamTransformerPath !== 'string') {
+    throw new Error('Upstream transformer path is not a string');
+  }
+
+  const upstreamTransformer = require(upstreamTransformerPath);
+  const pluginsWithHarness = [
+    // Checked against @babel/core's type definitions - plugins are an array of PluginItem
+    ...((plugins as unknown[]) ?? []),
+    ...rnHarnessPlugins,
+  ];
+
+  return upstreamTransformer.transform({
+    ...args,
+    plugins: pluginsWithHarness,
+  });
+};
+
+export { transform };

packages/metro/src/withRnHarness.ts

@@ -3,6 +3,7 @@ import { getConfig } from '@react-native-harness/config';
 import { patchModuleSystem } from './moduleSystem';
 import { getHarnessResolver } from './resolver';
 import { getHarnessManifest } from './manifest';
+import { getHarnessBabelTransformerPath } from './babel-transformer';
 
 export const withRnHarness = async (
   config: MetroConfig | Promise<MetroConfig>
@@ -20,6 +21,8 @@ export const withRnHarness = async (
 
   const harnessResolver = getHarnessResolver(metroConfig, harnessConfig);
   const harnessManifest = getHarnessManifest(harnessConfig);
+  const harnessBabelTransformerPath =
+    getHarnessBabelTransformerPath(metroConfig);
 
   const patchedConfig: MetroConfig = {
     ...metroConfig,
@@ -37,6 +40,10 @@ export const withRnHarness = async (
       blockList: undefined,
       resolveRequest: harnessResolver,
     },
+    transformer: {
+      ...metroConfig.transformer,
+      babelTransformerPath: harnessBabelTransformerPath,
+    },
   };
 
   if (harnessConfig.unstable__skipAlreadyIncludedModules) {

packages/metro/tsconfig.json

@@ -3,6 +3,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../babel-preset"
+    },
     {
       "path": "../config"
     },

packages/metro/tsconfig.lib.json

@@ -11,6 +11,9 @@
   },
   "include": ["src/**/*.ts"],
   "references": [
+    {
+      "path": "../babel-preset/tsconfig.lib.json"
+    },
     {
       "path": "../config/tsconfig.lib.json"
     },

pnpm-lock.yaml

@@ -63,17 +63,6 @@ const customConfig = {
 module.exports = withRnHarness(mergeConfig(defaultConfig, customConfig));
 ```
 
-### 3. Update Babel Configuration
-
-Add the required preset to `babel.config.js`. This is needed for module mocking and bundling speedup when running tests.
-
-```javascript
-module.exports = {
-  presets: ['module:@react-native/babel-preset', 'react-native-harness/babel'],
-  // Your existing Babel config
-};
-```
-
 ## Writing Your First Test
 
 Create a test file with a `.harness.js` or `.harness.ts` extension. Import testing utilities from `react-native-harness` instead of Jest: