Running the Current Test File in VS Code

For the last few months, I’ve been using Visual Studio Code on a Node.js project. It’s a pretty great editor, and its support for TypeScript is fantastic. As part of my normal workflow, I try to follow TDD practices as much as possible. For efficiency’s sake, I like to execute the tests in the test file I’m currently editing, right from the editor (I’ve written about setting up Vim to run the current test file in an external terminal in the past).

However, it wasn’t immediately obvious how to get VS Code to do that. In this post, I’ll point out what needs to be done to get VS Code to kick off Mocha to run the tests in a current file.

Use the Debugger

One way to run tests in VS Code would be to use the debugger. It comes with support for debugging Node.js programs out of the box. But unless I’m trying to troubleshoot a problem, I’d rather not add the overhead of running the tests with a debugger connected.

External Tools

I want to be able to run the tests in VS Code the same way I run them on the command line:

NODE_ENV=test ./node_modules/.bin/mocha test/someTest.ts

VS Code’s Tasks support this very nicely. All you need to do is add a task to the project’s tasks.json file. If you don’t have one already, you can create one by selecting Configure Tasks from the Tasks menu and selecting the Other option (see Custom Tasks for more info).

The current documentation for a custom task already provides a good example for running a test script. But that example is for running all of the tests, not just the current file. The key to running only the current file is the ${relativeFile} variable (thanks to Jordan Nelson for pointing that variable out to me).

Here’s an example configuration which creates a task that, when executed, will run the mocha command line tool, passing the location of the current file as an argument.

{
	"taskName": "runCurrentTest",
	"type": "shell",
	"command": "NODE_ENV=test ./node_modules/.bin/mocha",
	"args": [
			"${relativeFile}"
	],
	"group": "test",
	"presentation": {
			"echo": true,
			"reveal": "always",
			"focus": false,
			"panel": "dedicated"
	}
}

Controlling Presentation

The presentation portion of that configuration gives you some control about what happens when this task is run. I’ve got it configured here to echo the command that was run in the shell (helpful if you want to copy it out to run by hand in another terminal), always show the terminal when running the test, not give focus to the terminal but leave it in the editor, and always run this particular task in the same dedicated terminal.

Keyboard Shortcut

When you’re running tests all day long, you’ll want to assign a keyboard shortcut so you can easily kick off the test file being edited. To kick off the runCurrentTest task with Command+Shift+F5 (just to take something that’s not a default keybinding), add the following to your keybindings.json:

{
  "key": "cmd+shift+f5",
  "command": "workbench.action.tasks.runTask",
  "args": "runCurrentTest"
}

Scrolling the Terminal

Using a keyboard shortcut to execute the test runner for the file currently being edited works quite well in VS Code. However, I did keep running into one issue when scrolling up in the terminal to look at the output. The next time I’d run the tests, it would look like nothing was happening because the terminal doesn’t automatically scroll to the end when you execute a task.

My workaround was to install the macros extension, which provides support for combining multiple VS Code actions into a macro that can be assigned a keyboard shortcut. It does this by running the task and then telling the terminal to scroll to the bottom (using the workbench.action.terminal.scrollToBottom action). To achieve this, I added the following to my settings.json file:

"macros": {
  "runCurrentTest": [
    {
      "command": "workbench.action.tasks.runTask",
      "args": "runCurrentTest"
    },
    "workbench.action.terminal.scrollToBottom"
  ]
}

Then I replaced the keyboard shortcut (in keybindings.json) with:

{
  "key": "cmd+shift+f5",
  "command": "macros.runCurrentTest"
}

Conclusion

Being able to quickly run the test cases in the current file is a key part of my daily workflow. Now that I’ve got VS Code configured to support that, I’m even more productive, and I enjoy using it more and more.