fix: Warm up the animation pipeline before auto-run tests and stop orphaning Metro

Author: tjzel

apps/common-app/runtime-tests/AutoRunRuntimeTestsApp.tsx

@@ -58,12 +58,14 @@ interface AutoRunRuntimeTestsAppProps {
   tests: RuntimeTestSuite[];
   library: string;
   forbidReanimated?: boolean;
+  warmUp?: () => Promise<void>;
 }
 
 export default function AutoRunRuntimeTestsApp({
   tests,
   library,
   forbidReanimated,
+  warmUp,
 }: AutoRunRuntimeTestsAppProps) {
   const wsUrl = deriveWsUrl();
   return (
@@ -76,6 +78,7 @@ export default function AutoRunRuntimeTestsApp({
           autoRun={{ wsUrl }}
           library={library}
           forbidReanimated={forbidReanimated}
+          warmUp={warmUp}
         />
       </View>
     </View>

apps/common-app/runtime-tests/ReJest/AutoRunRuntimeTestsRunner.tsx

@@ -26,6 +26,7 @@ interface AutoRunRuntimeTestsRunnerProps {
   autoRun: AutoRunConfig;
   library: string;
   forbidReanimated?: boolean;
+  warmUp?: () => Promise<void>;
 }
 
 interface ProgressState {
@@ -50,6 +51,7 @@ export default function AutoRunRuntimeTestsRunner({
   autoRun,
   library,
   forbidReanimated,
+  warmUp,
 }: AutoRunRuntimeTestsRunnerProps) {
   const [component, setComponent] = useState<ReactNode | null>(null);
   const [status, setStatus] = useState<string>(
@@ -98,10 +100,9 @@ export default function AutoRunRuntimeTestsRunner({
         });
 
         const known = new Set(tests.map((test) => test.testSuiteName));
-        const unknown = [
-          ...(filterSet ?? []),
-          ...(includeSet ?? []),
-        ].filter((name) => !known.has(name));
+        const unknown = [...(filterSet ?? []), ...(includeSet ?? [])].filter(
+          (name) => !known.has(name)
+        );
         if (unknown.length > 0) {
           throw new Error(`Unknown test suites: ${unknown.join(', ')}`);
         }
@@ -125,6 +126,9 @@ export default function AutoRunRuntimeTestsRunner({
           render: setComponent,
           onProgress: setProgress,
         });
+        if (warmUp) {
+          await warmUp();
+        }
         const summary = await runTests();
         if (forbidReanimated && isReanimatedLoaded()) {
           summary.failed += 1;
@@ -140,7 +144,7 @@ export default function AutoRunRuntimeTestsRunner({
       cancelled = true;
       teardown();
     };
-  }, [autoRun.wsUrl, tests, library, forbidReanimated]);
+  }, [autoRun.wsUrl, tests, library, forbidReanimated, warmUp]);
 
   return (
     <View style={styles.flexOne}>

apps/common-app/runtime-tests/reanimated/AutoRunApp.tsx

@@ -1,18 +1,56 @@
-import 'react-native-reanimated';
-
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 import AutoRunRuntimeTestsApp from '../AutoRunRuntimeTestsApp';
 import { REANIMATED_TEST_SUITES } from './suites';
 
+const WARM_UP_TIMEOUT_MS = 5000;
+
+let resolveWarmUp: () => void;
+const warmUpDone = new Promise<void>((resolve) => {
+  resolveWarmUp = resolve;
+});
+
+function finishWarmUp() {
+  resolveWarmUp();
+}
+
+function warmUp() {
+  return warmUpDone;
+}
+
+// Pays UI-runtime init and frame-pipeline costs at app boot, so the first
+// test's fixed wait budget starts against a warm pipeline. Capped so a broken
+// warm-up can never block the run.
+function WarmUpView() {
+  const width = useSharedValue(1);
+  const style = useAnimatedStyle(() => ({ width: width.value }));
+  useEffect(() => {
+    const timeoutId = setTimeout(finishWarmUp, WARM_UP_TIMEOUT_MS);
+    width.value = withTiming(100, { duration: 100 }, () => {
+      'worklet';
+      runOnJS(finishWarmUp)();
+    });
+    return () => clearTimeout(timeoutId);
+  }, [width]);
+  return <Animated.View style={[styles.warmUpView, style]} />;
+}
+
 export default function ReanimatedAutoRunApp() {
   return (
     <GestureHandlerRootView style={styles.container}>
+      <WarmUpView />
       <AutoRunRuntimeTestsApp
         tests={REANIMATED_TEST_SUITES}
         library="Reanimated"
+        warmUp={warmUp}
       />
     </GestureHandlerRootView>
   );
@@ -22,4 +60,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  warmUpView: {
+    height: 1,
+  },
 });

apps/fabric-example/scripts/runtime-tests-server.js

@@ -357,9 +357,13 @@ function shutdown(code) {
   clearTimer('idle');
   if (metroChild && !metroChild.killed) {
     try {
-      metroChild.kill('SIGTERM');
+      process.kill(-metroChild.pid, 'SIGTERM');
     } catch {
-      /* ignore */
+      try {
+        metroChild.kill('SIGTERM');
+      } catch {
+        /* ignore */
+      }
     }
   }
   wss.close(() => {
@@ -450,12 +454,15 @@ async function ensureMetroRunning() {
   );
   // --reset-cache: a Metro cache produced under a different Bundle Mode
   // setting serves stale module maps ("Requiring unknown module").
+  // detached: Metro must get its own process group so shutdown can kill the
+  // whole tree — killing just the yarn wrapper orphans the actual Metro process.
   metroChild = spawn(
     'yarn',
     ['start', '--port', String(METRO_PORT), '--reset-cache'],
     {
       cwd: projectRoot,
       stdio: ['ignore', 'pipe', 'pipe'],
+      detached: true,
     }
   );
   metroChild.stdout.on('data', (chunk) => {