Some images not showing in rntester

change/@office-iss-react-native-win32-0ab600ad-ad57-49d6-9764-a678fc6ab287.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix images not showing in test app",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@react-native-windows-automation-commands-89735739-ea74-43f0-b41a-01a53ae6177f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update dumpVisualTree to handle uris from rnx-kit asset plugin",
+  "packageName": "@react-native-windows/automation-commands",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-56845efd-4f67-46f0-8fd2-94bc45fce5cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix images not showing in test app",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@office-iss/react-native-win32/package.json

@@ -12,14 +12,14 @@
   "types": "types",
   "scripts": {
     "build": "rnw-scripts build",
-    "bundle": "rnw-scripts prepareBundle && npx @react-native-community/cli bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
+    "bundle": "rnw-scripts prepareBundle && npx @react-native-community/cli rnx-bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
     "clean": "rnw-scripts clean",
     "flow-check": "rnw-scripts flow-check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
     "run-win32-devmain": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
     "run-win32": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
-    "start": "npx @react-native-community/cli start --projectRoot ../react-native-win32-tester",
+    "start": "npx @react-native-community/cli rnx-start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
   },
@@ -78,7 +78,8 @@
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.42",
     "@rnw-scripts/just-task": "2.3.58",
     "@rnw-scripts/metro-dev-config": "0.0.0",
-    "@rnx-kit/jest-preset": "^0.1.17",
+    "@rnx-kit/cli": "^1.1.0",
+    "@rnx-kit/jest-preset": "^0.3.1",
     "@types/node": "^22.0.0",
     "@types/prop-types": "15.7.1",
     "@types/react": "^19.2.0",
@@ -109,7 +110,19 @@
     ]
   },
   "promoteRelease": true,
+  "rnx-kit": {
+    "bundle": {
+      "plugins": [
+        [
+          "@rnx-kit/metro-plugin-cyclic-dependencies-detector",
+          {
+            "throwOnError": false
+          }
+        ]
+      ]
+    }
+  },
   "engines": {
     "node": ">= 22"
   }
-}
+}

packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts

@@ -148,6 +148,15 @@ function removeGuidsFromImageSourcesHelper(node: ComponentNode) {
             '<localOrBundlerUri>',
           );
 
+          // When using rnx-kit's asset monorepo plugin assets outside the project root become something like:
+          // file://D:\\a\\_work\\1\\s\\packages\\e2e-test-app-fabric\\windows\\RNTesterApp-Fabric.Package\\bin\\x64\\Release\\AppX\\RNTesterApp-Fabric\\Bundle\\assets?unstable_path=_@react-native-windows/tester/js/assets/dislike.png
+          // becomes
+          // <localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png
+          source.Uri = source.Uri.replace(
+            new RegExp(`file://${packagesPath}.*\\\\Bundle\\\\assets?`),
+            '<localOrBundlerUri>',
+          );
+
           // When loading the bundle from metro local paths will be replaced with paths to localhost, which will not align with snapshots made with prebuilt bundles.
           // This logic replaces the localhost uri, with the same uri that we would have gotten from a prebuild bundle.  This makes it easier to debug without breaking snapshots
           // http://localhost:8081/assets/@@/@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png?platform=windows&hash=c6f5aec4d9e0aa47c0887e4266796224

packages/@rnw-scripts/metro-dev-config/metro.dev.config.js

@@ -15,6 +15,9 @@ const {
 } = require('@rnx-kit/metro-plugin-duplicates-checker');
 
 function makeMetroConfig(customConfig = {}) {
+  if (customConfig.unstable_allowAssetsOutsideProjectRoot === undefined)
+    customConfig.unstable_allowAssetsOutsideProjectRoot = true;
+
   return mergeConfig(MetroConfig.makeMetroConfig(customConfig), {
     resolver: {
       enableGlobalPackages: true,

packages/@rnw-scripts/metro-dev-config/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@react-native/metro-config": "0.83.0-nightly-20251012-6f482708b",
-    "@rnx-kit/metro-config": "^2.1.2",
+    "@rnx-kit/metro-config": "^2.2.3",
     "@rnx-kit/metro-plugin-duplicates-checker": "^3.0.2",
     "@rnx-kit/metro-serializer": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^7.1.1",

packages/e2e-test-app-fabric/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "npx @react-native-community/cli start",
+    "start": "npx @react-native-community/cli rnx-start",
     "lint": "rnw-scripts lint",
     "lint:fix": "rnw-scripts lint:fix",
     "watch": "rnw-scripts watch",
@@ -39,8 +39,8 @@
     "@rnw-scripts/just-task": "2.3.58",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnw-scripts/ts-config": "2.0.6",
-    "@rnx-kit/cli": "^0.16.10",
-    "@rnx-kit/jest-preset": "^0.1.16",
+    "@rnx-kit/cli": "^1.1.0",
+    "@rnx-kit/jest-preset": "^0.3.1",
     "@types/jest": "^29.2.2",
     "@types/node": "^22.14.0",
     "@types/react": "^19.2.0",
@@ -52,6 +52,18 @@
     "sanitize-filename": "^1.6.3",
     "typescript": "5.0.4"
   },
+  "rnx-kit": {
+    "bundle": {
+      "plugins": [
+        [
+          "@rnx-kit/metro-plugin-cyclic-dependencies-detector",
+          {
+            "throwOnError": false
+          }
+        ]
+      ]
+    }
+  },
   "engines": {
     "node": ">= 22"
   }

packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap

@@ -67,7 +67,7 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = `
                         {
                           "Size": "128, 128",
                           "Type": "Local",
-                          "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/dislike.png",
+                          "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/dislike.png",
                         },
                       ],
                     },

packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap

@@ -34,7 +34,7 @@ exports[`Home UIA Tree Dump APIs Tab 1`] = `
                 {
                   "Size": "111, 72",
                   "Type": "Local",
-                  "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/bottom-nav-apis-icon-light.png",
+                  "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/bottom-nav-apis-icon-light.png",
                 },
               ],
             },
@@ -1032,7 +1032,7 @@ exports[`Home UIA Tree Dump Components Tab 1`] = `
                 {
                   "Size": "66, 72",
                   "Type": "Local",
-                  "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/bottom-nav-components-icon-dark.png",
+                  "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/bottom-nav-components-icon-dark.png",
                 },
               ],
             },

packages/e2e-test-app-fabric/test/__snapshots__/ImageComponentTest.test.ts.snap

@@ -12,9 +12,8 @@ exports[`Image Tests A network Image example 1`] = `
     "_Props": {
       "Sources": [
         {
-          "Size": "6000, 5340",
-          "Type": "Local",
-          "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/very-large-image.png",
+          "Type": "Remote",
+          "Uri": "https://www.facebook.com/assets/fb_lite_messaging/E2EE-settings@3x.png?r=1",
         },
       ],
       "TestId": "image-network",
@@ -1937,7 +1936,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -1950,7 +1949,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -1963,7 +1962,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -1976,7 +1975,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -1993,7 +1992,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2006,7 +2005,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2019,7 +2018,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2032,7 +2031,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2049,7 +2048,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2062,7 +2061,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2075,7 +2074,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -2088,7 +2087,7 @@ exports[`Image Tests An Image can have a tint color 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -3376,7 +3375,7 @@ exports[`Image Tests An Image can load a static image 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_normal@2x.png",
             },
           ],
         },
@@ -3389,7 +3388,7 @@ exports[`Image Tests An Image can load a static image 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_thumb_selected@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_thumb_selected@2x.png",
             },
           ],
         },
@@ -3402,7 +3401,7 @@ exports[`Image Tests An Image can load a static image 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_comment_normal@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_comment_normal@2x.png",
             },
           ],
         },
@@ -3415,7 +3414,7 @@ exports[`Image Tests An Image can load a static image 1`] = `
               "Scale": 2,
               "Size": "17, 40",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/uie_comment_highlighted@2x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/uie_comment_highlighted@2x.png",
             },
           ],
         },

packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap

@@ -943,7 +943,7 @@ exports[`Text Tests Text can have inline views/images 1`] = `
               "Scale": 3,
               "Size": "33, 33",
               "Type": "Local",
-              "Uri": "<localOrBundlerUri>@react-native-windows/tester/js/assets/flux@3x.png",
+              "Uri": "<localOrBundlerUri>?unstable_path=_@react-native-windows/tester/js/assets/flux@3x.png",
             },
           ],
         },

packages/playground/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.54",
   "private": true,
   "scripts": {
-    "start": "npx @react-native-community/cli start --client-logs",
+    "start": "npx @react-native-community/cli rnx-start",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
     "windows": "npx @react-native-community/cli run-windows"
@@ -28,6 +28,7 @@
     "@rnw-scripts/just-task": "2.3.58",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnw-scripts/ts-config": "2.0.6",
+    "@rnx-kit/cli": "^1.1.0",
     "@types/node": "^22.14.0",
     "@types/react": "^19.2.0",
     "eslint": "^8.19.0",
@@ -36,6 +37,18 @@
     "react-test-renderer": "19.1.0",
     "@rnw-scripts/sample-custom-component": "0.0.1"
   },
+  "rnx-kit": {
+    "bundle": {
+      "plugins": [
+        [
+          "@rnx-kit/metro-plugin-cyclic-dependencies-detector",
+          {
+            "throwOnError": false
+          }
+        ]
+      ]
+    }
+  },
   "engines": {
     "node": ">= 22"
   }

packages/sample-app-fabric/package.json

@@ -35,7 +35,7 @@
     "@rnw-scripts/just-task": "2.3.58",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnw-scripts/ts-config": "2.0.6",
-    "@rnx-kit/jest-preset": "^0.1.16",
+    "@rnx-kit/jest-preset": "^0.3.1",
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.6.3",

packages/sample-custom-component/package.json

@@ -40,7 +40,7 @@
     "@rnw-scripts/just-task": "2.3.58",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnw-scripts/ts-config": "2.0.6",
-    "@rnx-kit/jest-preset": "^0.1.16",
+    "@rnx-kit/jest-preset": "^0.3.1",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",