Running Mocha tests within Sublime Text

I spend most of my day in Visual Studio with lots of the goodies an IDE can offer. One of them being able to run your tests from a keystroke.

In a bid to expand my mind I'm working on a little project that is made up of JS entirely so I've dug out Sublime Text. It has lots of plugins that are very handy, especially Sublime-HTMLPrettify which will tidy your HTML, CSS & JS for you.

When writing tests for JS there are many libraries you can use but I've chosen Mocha for now. The one thing I couldn't work out was to run my tests within Sublime Text until now.

Build System

Sublime allows you to have build systems a bit like an IDE so you can tell it what to do when you invoke it via cmd+B.

To get Mocha to run we need to create a new build system. To do this click Tools - Build System - New Build System and paste in the below:

{
    "cmd": ["make"],
    "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
    "working_dir": "${project_path:${folder:${file_path}}}",
    "selector": "source.makefile",
    "shell": true,
    "variants": [{
        "name": "Clean",
        "cmd": ["make", "clean"]
    }]
}

Click Save and call it Mocha

Now when you have a project go to Tools - Build System and select Mocha

Make file

A Make file is a script that allows you to execute various commands and its what our build system looks for when we tell Sublime to build our project. We need a file called makefile in the root of our project. Inside that makefile we can invoke Mocha to run our tests.

Place this in your makefile:

test:
    mocha --recursive --reporter spec moviebucketlist.tests/*.js
.PHONY: test

Now when you invoke the build system via cmd+B in Sublime it will execute Mocha and give you the results in the console of Sublime. Mocha by default will look for a folder called test and execute the tests inside it. If you have a different folder name you can append the folder name and wildcard to js files like I have done above.

Happy Coding!

comments powered by Disqus