feat: Added test:debug script (#1628)

Added a `test:debug` npm script.

resolves #1627

.vscode/settings.json

@@ -8,12 +8,7 @@
     }
   ],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "stylelint.validate": [
-    "css",
-    "html",
-    "sass",
-    "scss"
-  ],
+  "stylelint.validate": ["css", "html", "sass", "scss"],
   "launch": {
     "version": "0.2.0",
     "configurations": [
@@ -24,8 +19,37 @@
         "url": "http://localhost:4000",
         "webRoot": "${workspaceFolder}",
         "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile"
+      },
+      {
+        "type": "node",
+        "request": "attach",
+        "name": "Attach to Node Process",
+        "port": 9229
+      },
+      {
+        "name": "Debug Jest Tests",
+        "type": "node",
+        "request": "launch",
+        "runtimeArgs": [
+          "--inspect-brk",
+          "${workspaceRoot}/node_modules/.bin/jest",
+          "--config",
+          "jest.config.unit.cjs",
+          "--runInBand",
+          "--watch",
+          "${input:pickFile}"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen"
       }
     ],
-    "compounds": []
+    "compounds": [],
+    "inputs": [
+      {
+        "id": "pickFile",
+        "type": "promptString",
+        "description": "Test pattern or filename"
+      }
+    ]
   }
-}
+}

README.md

@@ -94,6 +94,14 @@ Note that log messages from other sources such as react prop types will still be
 
 If you want to collect coverage locally, run `npm test -- --coverage`
 
+### Debugging Unit Tests
+Unit tests can be debugged by running jest with the `--inspect-brk` flag and attaching to the node process in vscode's debugger. There are 2 launch configs that make this easier:
+
+- Debug Jest Tests - This will prompt you for a test name or pattern and will then run tests in watch mode with an attached debugger.
+- Attach to Node Process - This will attempt to attach to an existing node process running with `--inspect-brk`. There is an npm script `test:debug` that can start the process for you. By default, it will run with the same configuration as `npm test`, but you can supply additional parameters to narrow the scope of tests being run.
+
+  e.g. `npm run test:debug ThemeUtils` would only run modules with "ThemeUtils" in the name.
+
 ## E2E Tests
 
 We use [Playwright](https://playwright.dev/) for end-to-end tests. We test against Chrome, Firefox, and Webkit (Safari). Snapshots from E2E tests are only run against Linux so they can be validated in CI.

package.json

@@ -41,6 +41,7 @@
     "start:embed-grid": "lerna run start --scope=@deephaven/embed-grid --stream",
     "pretest": "npm run build:necessary",
     "test": "jest --watch --changedSince origin/main",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --config jest.config.unit.cjs --runInBand --watch",
     "pretest:unit": "npm run pretest",
     "test:unit": "jest --config jest.config.unit.cjs",
     "test:lint": "jest --config jest.config.lint.cjs",