Debugging mocha unit tests with WebStorm step by step

WebStorm is a pretty awesome IDE (there Hadi, I said it!) which I do not use enough! As a node.js developer one of the great features it offers is a really nice debugging story, something that MANY node developers die without long for. It also has support for various test runners like nodeunit and mocha. Can we put those features together though? I mean can we debug our mocha unit tests in WebStorm? I’ve been wondering this for a while and just the other day Josh and I were chatting about it.

After a bit of investigating, I can say the answer is YES. If you search around the internets you’ll find a post which describes how to do it. In this post I’ll show you step by step exactly how to do it with screenshots

Prereq – Install mocha

npm install mocha –g. (use sudo if you need to)

Step 1 – Open your project

Launch WebStorm and then open the node project that includes your mocha tests.

Step 2 – Create a new Run/Debug configuration

Click on Run->Edit Configurations in the menu or select “Edit Configurations” from the configuration drop down. Then press the + to add a new configuration and select “Node.js”.

Step 3 – Enter the configuration information

Now there’s a few pieces of information you need to enter.

Path to Node: Should be set by default, but if you have a specific node version you want, see it here.
Path to Node App JS File: This should point to where your mocha module is installed globally. It’s very important that you point to the _mocha file as you can see below.
- On Mac / Linux it will be in /usr/local/lib/node_modules/mocha.
- On Windows you’ll find it in your %APPDATA%/npm/node_modules/mocha folder.
Application Parameters: If you want to debug a specific file (rather than running all) put the name of the file you want to debug (cli-buddy-tests.js in the example) as well as any additional mocha params.
If your tests rely on any environment variables, set those in the “Environment Variables Window”

Step 4 – Add a break point and go!

Add a break point for where you want to start debugging. Then hit the debug button are you are on your way.

As you can see above I hit my breakpoint. I can now step, see variables, etc.

All I can say is booyah.js!

This entry was posted in node.js, webstorm. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

David Henderson

There’s now no need – the latest Webstorm release supports Mocha natively. See http://blog.jetbrains.com/webstorm/2013/11/webstorm-7-0-2-is-available/
Steve Gentile

Very helpful thanks – now if I could just figure out how to set it up to run node first then mocha – seems when I try to run node as a pre-config to my mocha – it runs the node but the mocha doesn’t run
http://blogs.msdn.com/gblock Glenn Block

@andy

Yes, it is due to the spawning. I didn’t want to go into detail which is why I put ‘It’s very important that you point to the _mocha file as you can see below.’, however if you think it is valuable to add I can.

@ryan. Glad it helped!
Ryan Regalado

Thanks for posting. This was super helpful in a node.js app I’ve been debugging and writing tests for. Awesome
http://twitter.com/AussieFlem Andy Fleming

Answering my own question, but might be worth updating the post.

From the linked post:
“Pointing the run configuration to _mocha is quite important since the main mocha binary spawns a new process you cannot connect via a debugger!”
http://twitter.com/AussieFlem Andy Fleming

Quick question: Why is it “very important that you point to the _mocha file” rather than the mocha file.

Looking at the source it seems mocha is a wrapper for the “real” _mocha – but presumably they’ve done this for a reason and you’re bypassing it?

Just curious