VSCode Debugging with Jest for Monorepos

Works with either JS or TS monorepos

Introduction

This post walks through the required VSCode launch.json configuration in order to debug the currently selected file with Jest for any file in a (multi-package) monorepo.

When a file is selected and you would like VSCode to run and debug it with Jest, you must tell VSCode which package within your multi-package monorepo that file lies. This is because, for example, most monorepos have per-package jest config and setup file(s).

Step 1 - Prerequisites

1. Have a monorepo that uses Jest and the package directories are in /packages

2. Each package has their own Jest configuration file, for example jest.config.{ts,js}

3. Installed the Command Variable VSCode extension

Step 2 - Dependencies

Ensure the following dependencies are installed:

1. jest

2. @types/jest

If your monorepo uses Typescript, then ensure ts-jest is also installed.

If unsure: npm install --save-dev jest @types/jest ts-jest

Step 3 - launch.json

This is the entire launch.json, complete with comments explaining how the interesting bits work (gist link):

Be sure to replace “packages”, “src”, and/or “jest.config.ts” to suit your needs.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Test current file",
	"type": "node",
	"request": "launch",
	// This takes the package name transform input we declare
	// below to `cd` to package directory that owns the currently
	// selected file in VSCode
	"cwd": "${workspaceFolder}/packages/${input:packageName}",
	"runtimeArgs": [
	"--inspect-brk",
	"${workspaceRoot}/node_modules/.bin/jest",
	"--runInBand",
	// This is the jest config file relative to the package
	// directory, hence why it is a relative path. We can do
	// this because we have configured `cwd` to already be at
	// the package root before we run jest.
	"--config",
	"jest.config.ts",
	"--runTestsByPath",
	"${file}"
	],
	"console": "integratedTerminal",
	"internalConsoleOptions": "neverOpen",
	"skipFiles": [
	"${workspaceFolder}/../../node_modules/**/*",
	"<node_internals>/**/*"
	],
	"windows": {
	"cwd": "${workspaceFolder}/packages/${input:packageNameWin}",
	// Windows needs to use the .js, whereas all others can use
	// the executable in node_modules/.bin.
	// Docs: https://jestjs.io/docs/troubleshooting#debugging-in-vs-code
	"runtimeArgs": [
	"--inspect-brk",
	"${workspaceRoot}/node_modules/jest/bin/jest.js",
	"--runInBand",
	"--config",
	"jest.config.ts",
	"--runTestsByPath",
	"${file}"
	],
	"skipFiles": ["C:\\**\\node_modules\\**\\*", "<node_internals>/**/*"]
	},
	},
	],
	"inputs": [
	{
	"id": "packageName",
	"type": "command",
	"command": "extension.commandvariable.transform",
	"args": {
	// This will be the full path to the file that is currently
	// selected in VSCode. Example:
	// /home/your-username/your-project/packages/your-package/src/your-file.ts
	"text": "${file}",
	// This will look for the directory name immediately before
	// the "src" directory, which, if your packages are consistent,
	// will definitely be the package name that we want. Example:
	// /home/your-username/your-project/packages/your-package/src/your-file.ts
	// |----------|
	// |
	// EXTRACTS THIS BIT
	"find": ".*/packages/(.*)/src/.*",
	// This just returns the first capture group, which we have
	// defined above in the `find` as the package name. We will
	// use this in the `cwd` above.
	"replace": "$1",
	"flags": "g"
	}
	},
	// This is the same as above but must use the quad-back-slash
	// hack to be compatible with Windows.
	{
	"id": "packageNameWin",
	"type": "command",
	"command": "extension.commandvariable.transform",
	"args": {
	"text": "${file}",
	"find": ".*\\\\packages\\\\(.*)\\\\src\\\\.*",
	"replace": "$1",
	"flags": "g"
	}
	}
	]
	}

view raw launch.jsonc hosted with ❤ by GitHub

Step 4 - Usage

Simply select a file in one of your packages, like so:

Then run the Test current file debug task, like so:

Et voila, works for every package:

Footnotes

1. Command Variable documentation: link

2. Where exactly Command Variable does the transform magic: code link

3. Be sure to replace “packages” and/or “src” with whatever your monorepo conventions are.

4. If your monorepo does not have a jest config file per-package, then you may want to edit the “jest.config.ts” part in the launch.json gist with something like “${workspaceFolder}/jest.config.ts“.

5. An example of a typical jest.config.ts: