Automatically inject debugger statements in tests in preparation for debug mode (#53205)

Summary:
Pull Request resolved: #53205

Changelog: [internal]

This injects a custom Babel transform for Fantom tests that automatically injects `debugger` statements in the generated code. This simplifies debugging by providing a default interruption point in the test setup for the test author to decide what to debug.

This has no effect unless the debugger is opened, which isn't happening yet.

Reviewed By: rshest

Differential Revision: D79996000

Author: rubennorte

private/react-native-fantom/config/babel-plugins/inject-debugger-statements-in-tests.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ * @format
+ */
+
+/**
+ * This transform injects a single `debugger;` statement at the top of every
+ * Fantom test, so we can automatically stop on them when debugging.
+ */
+module.exports = function ({types: t}) {
+  return {
+    name: 'inject-debugger-statements-in-tests',
+    visitor: {
+      Program(path, state) {
+        const filename = state.filename || '';
+        if (
+          (filename.endsWith('-itest.js') ||
+            filename.endsWith('-itest.fb.js')) &&
+          !filename.includes('/.out/')
+        ) {
+          // Check if the first statement is already a debugger statement
+          const first = path.node.body[0];
+          if (!first || first.type !== 'DebuggerStatement') {
+            path.unshiftContainer('body', t.debuggerStatement());
+          }
+        }
+      },
+    },
+  };
+};

private/react-native-fantom/config/metro-babel-transformer.flow.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {
+  BabelTransformer,
+  BabelTransformerArgs,
+} from 'metro-babel-transformer';
+
+import MetroBabelTransformer from '@react-native/metro-babel-transformer';
+import crypto from 'crypto';
+import fs from 'fs';
+
+const transform: BabelTransformer['transform'] = (
+  args: BabelTransformerArgs,
+) => {
+  const processedArgs = {
+    ...args,
+    plugins: [
+      ...(args.plugins ?? []),
+      // $FlowExpectedError[untyped-import]
+      require('./babel-plugins/inject-debugger-statements-in-tests'),
+    ],
+  };
+  return MetroBabelTransformer.transform(processedArgs);
+};
+
+module.exports = {
+  ...MetroBabelTransformer,
+  transform,
+  getCacheKey(): string {
+    const key = crypto.createHash('md5');
+    const cacheKeyParts = [
+      MetroBabelTransformer.getCacheKey?.() ?? '',
+      fs.readFileSync(__filename),
+      fs.readFileSync(
+        require.resolve('./babel-plugins/inject-debugger-statements-in-tests'),
+      ),
+    ];
+    cacheKeyParts.forEach(part => key.update(part));
+    return key.digest('hex');
+  },
+};

private/react-native-fantom/config/metro-babel-transformer.js

@@ -11,4 +11,4 @@
 'use strict';
 
 require('../../../scripts/shared/babelRegister').registerForMonorepo();
-module.exports = require('@react-native/metro-babel-transformer');
+module.exports = require('./metro-babel-transformer.flow');