[test] Allow debugging with Chrome and VSCode inspector (mui#29777)

.gitignore

@@ -2,7 +2,8 @@
 # However, in order to prevent issues, they are ignored here.
 .DS_STORE
 .idea
-.vscode
+.vscode/*
+!.vscode/launch.json
 *.log
 *.tsbuildinfo
 /.eslintcache

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Test Current File",
+      "program": "test/cli.js",
+      "args": ["${relativeFile}", "--inspecting"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true
+    }
+  ]
+}

test/README.md

@@ -112,6 +112,14 @@ trade-off, mainly completeness vs. speed.
 
 ### React API level
 
+#### Debugging tests
+
+If you want to debug tests with the e.g. Chrome inspector (chrome://inspect) you can run `yarn t <testFilePattern> --debug`.
+Note that the test will not get executed until you start code execution in the inspector.
+
+We have a dedicated task to use VSCode's integrated debugger to debug the currently opened test file.
+Open the test you want to run and press F5 (launch "Test Current File").
+
 #### Run the core mocha unit/integration test suite.
 
 To run all of the unit and integration tests run `yarn test:unit`

test/cli.js

@@ -39,6 +39,9 @@ async function run(argv) {
   if (argv.bail) {
     args.push('--bail');
   }
+  if (argv.debug || argv.inspecting) {
+    args.push('--timeout 0');
+  }
   if (argv.debug) {
     args.push('--inspect-brk');
   }
@@ -86,6 +89,16 @@ yargs
           description: 'Stop on first error.',
           type: 'boolean',
         })
+        .option('debug', {
+          alias: 'd',
+          description:
+            'Allows attaching a debugger and waits for the debugger to start code execution.',
+          type: 'boolean',
+        })
+        .option('inspecting', {
+          description: 'In case you expect to hit breakpoints that may interrupt a test.',
+          type: 'boolean',
+        })
         .option('production', {
           alias: 'p',
           description: