Visual Studio Code is awesome and it is getting more and more popular in front end development. It’s great to write code, but you know what, it can be an IDE and allow you to debug your tests as well:

Go to Debug/Add Configuration menu and add this setting:

{
	"version": "0.2.0",
	"configurations": [
		{
		  "name": "Debug JS Tests",
		  "type": "node",
		  "request": "launch",
		  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
		  "args": [
			  "test",
			 "--runInBand",
			 "--no-cache",
			 "--env=jsdom"
		  ],
		  "cwd": "${workspaceRoot}",
		  "protocol": "inspector",
		  "console": "integratedTerminal",
		  "internalConsoleOptions": "neverOpen"
		}
	]
}

You can see that we are invoke the react-scripts-ts command with test argument. This also means we are not limited to tests – but I’m yet to debug the normal code.

Now it’s important to remember: you have to open your root folder, in most of the cases, the parent folder of src, in Visual Studio Code. This is to make sure Visual Studio can access the node_modules folder, as well as it can access package.json if needed. I tried to open src folder and a bunch of errors were thrown to my face.

Now you can happily debug your React tests with VS Code: