Debugging ES6 Mocha unit tests using VS Code
Tags: javascript, testing, es6, debugging
Published: 2019-06-21 14:17:47

---
title: Debugging ES6 Mocha unit tests using VS Code
published: true
tags: Javascript,Testing,ES6,Debugging
canonical_url: http://yer.ac/blog/2019/04/09/debugging-es6-mocha-unit-tests-using-vs-code/
---

The world of Mocha, VS Code and Node is still fairly new to me. Typically in the past all my JS unit tests have been debuggable in-browser using DevTools, but with Mocha this is not the case (As I am not deploying my spec files). I got Mocha to load via a launch config, but it would not originally work due to using ES6 directly.

**If you do not have a launch.json, start here. Otherwise skip to the next section**. Add a new Debug Configuration by selecting “Debug”, and then “Add Configuration”. Selecting “Node.js” automatically creates a “launch.json” under a root folder named .vscode. If you already had debug set up, this step would be irrelevant.

## Add Mocha configuration to launch.json

In the launch.json, much like the surprisingly helpful comments suggest, you can simply type “Mocha” then [ctrl]+[space] to bring up the intellisense for a Mocha configuration!

![](https://i2.wp.com/yer.ac/blog/wp-content/uploads/2019/04/image-1.png?fit=700%2C283)

Which will insert the appropriate snippet.

![](https://i1.wp.com/yer.ac/blog/wp-content/uploads/2019/04/image-2.png?fit=700%2C450)

Now, in theory it is as simple as clicking the play icon in debug, with “Mocha Tests” selected.

![](https://i2.wp.com/yer.ac/blog/wp-content/uploads/2019/04/image-3.png?w=840)

## Supporting ES6.

For me however, this **didn’t** work.

![](https://i0.wp.com/yer.ac/blog/wp-content/uploads/2019/04/image-4.png?fit=700%2C75)

The issue here is that I get a lot of unexpected token errors as my tests are using ES6 and I suspect that by default it wants to use ES5. The issue of using ES6 for unit tests was resolved in another [post](https://dev.to/wabbbit/attempting-to-use-mocha-chai-to-unit-test-es6-1eo7-temp-slug-4408678) .

Much like my previous post, I can update the launch arguments to use require to pull in the same 2 Babel modules, and will also specify a wild card file name of my tests so it doesn’t pick up any other code.

```
{
            "type": "node",
            "request": "launch",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
                "./test/**/*.spec.js",
                "--require", "@babel/polyfill",
                "--require", "@babel/register",
                "-u",
                "tdd",
                "--timeout",
                "999999",
                "--colors",           
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }
```

Now for me, this also didn’t work as I am using Chai for my BDD test syntax.

For this I had to change “tdd” to “bdd” under the args.

Now I can attach and debug, providing a breakpoint is set!

The post [Debugging ES6 Mocha unit tests using VS Code](http://yer.ac/blog/2019/04/09/debugging-es6-mocha-unit-tests-using-vs-code/) appeared first on [yer.ac | Adventures of a developer, and other things.](http://yer.ac/blog).