Simple TypeScript setup to debug Mocha tests from VS Code
Tags: typescript, mocha, vscode, node
Published: 2019-01-06 10:21:38

---
title: Simple TypeScript setup to debug Mocha tests from VS Code
published: true
description: A TypeScript setup to run and debug Mocha tests without extra configuration and runtime overhead of tools like ts-node.
tags: typescript,mocha,vscode,node
---

[ts-node](https://github.com/TypeStrong/ts-node) is a convenient tool to run TypeScript code without compilation. In [Theia](https://github.com/theia-ide/theia) project it enables us to debug any Mocha spec TS file in one click from [VS Code](https://code.visualstudio.com/) or [Gitpod](https://www.gitpod.io). It worked quite well for a long time and provided fast turnarounds.

Over time, the codebase grew and ts-node had to interpreter more and more code to run even a single file. Besides slowness, ts-node evaluates not exactly in the same way how TypeScript compiles. For instance, it [ignores some properties from tsconfig](https://github.com/TypeStrong/ts-node#help-my-types-are-missing) leading to missing types.

We [started looking](https://github.com/theia-ide/theia/pull/2563) for a TypeScript setup to run and debug tests without ts-node. Generally, removing dependencies to ts-node was quite straightforward. We got immediate benefits like an instant startup of tests, fewer npm packages to install and so on.

The missing part was to preserve fast turnarounds of tests execution for a single spec file from VS Code. One should be able to put a breakpoint in TS source code and debug it with one click. After changes, it was possible only with generated JS code.

I had started by reproducing the issue with [a minimal setup](https://github.com/akosyakov/ts-mocha-debugging):
- only TypeScript and Mocha installed;
- [watch](https://github.com/akosyakov/ts-mocha-debugging/blob/b40f7781caed2aa9223c37af380f74903938b73d/package.json#L15) npm script compiles TS code with `tsc -w`;
- and [test](https://github.com/akosyakov/ts-mocha-debugging/blob/b40f7781caed2aa9223c37af380f74903938b73d/package.json#L16) script runs all tests with `mocha lib/**/*.spec.js`.

After that, I focused on getting the right launch configuration to debug tests from a single TS file. The issue boiled down to explaining VS Code which generated JS file to run for the currently opened TS file. Here [variable substitution](https://code.visualstudio.com/docs/editor/variables-reference) came very handy. Particularly, `fileBasenameNoExtension` variable provides a name of the currently opened file without an extension. For instance, if you open `src/repo.spec.ts` file then it resolves to `repo.spec`.

In the end, [Mocha Tests](https://github.com/akosyakov/ts-mocha-debugging/blob/b0b56ce858a86dbb1c99776b0915662dbb85b99c/.vscode/launch.json#L9) configuration emerged. It executes tests from all files matching `**/${fileBasenameNoExtension}.js`. In the case with `repo.spec.ts` that are tests from files matching `../repo.spec.js`.

You can try it out with VS Code or [from your browser with Gitpod](https://gitpod.io#https://github.com/akosyakov/ts-mocha-debugging) (requires OAuth with GitHub):
<img alt="Debugging TypeScript Mocha Tests" src="https://user-images.githubusercontent.com/3082655/50573829-99274f80-0ddb-11e9-9c70-b88520888678.gif" height="640" />