Installing Node.js with Karma and Mocha for Visual Studio

Node.js

Please download the installer (.msi) from their downloads page. There’s also an .exe but it didn’t work very well to me.

You need to install it as an admin, so open cmd as admin then go to the folder where the msi is downloaded and exec it (just write its name). That should install node.

Testing that it worked

Before going forward we can check that the install was successful, to test node, on the same cmd just type “node -v” and press enter, that should display its current version. You can also write just “node” to open the program. Now write “1+2” and press enter, that should output a 3. Ctrl+C to close node.

Node Package Manager (npm)

Which has the same acronym as Nuget Package Manager and may confuse you as it confused me, but on installing node this npm should be installed too and you can make use of it through the cmd, again, if installing plugins make sure you are executing it as admin. npm helps you installing addons that work over node.js server like Karma and Mocha. To install stuff you need to call the npm and set the instructions as a command.

You can install something globally like this:
npm install -g karma

Or you can install the same thing locally with this:
npm install --save karma

Local or global?

You may benefit from installing those tools globally on your computer so that every project can make use of them, or install them locally and make each project independent of the environment (they will work on each machine without needing to install each tool again) also allowing different projects to have different versions of each tool. We went form the global one.

To install it locally you need to move to the project main folder using cmd and execute the “local” version of the installing command:
cd MyProjectsDirectory/MyProject
npm install --save karma

That will generate a “node_modules” folder with all the tools you install (you can install them one by one or all of them in one go with a multiple command).

Possible problems with npm temp files

As we are using a sharedfolder on a network and I don’t have admin permissions on it when I’m using cmd, this blocked me when I tried to install karma using npm. To fix this I moved the default npm cache folder to a new one where I have admin permissions. Just execute this command:
npm config set cache C:\temp\npm-cache

Also, you may need to clean npm cache to make this change effective:
npm cache clean

Karma

So moving forward let’s install karma globally executing this command:
npm install -g karma karma-cli

To allow Karma to run with a global installation we need to install karma-cli too.

Once that’s done, you will need a config file to configure Karma, you can copy-paste one if you already have it or generate your own by going to the solution’s main folder using cmd and executing “karma init”. That will ask you a few questions:

Which testing framework do you want to use?
mocha
Do you want to use require.js?
no (we may use it in future but we want to make it simple for now)
Do you want to capture any browsers automatically?
Chrome
What is the location of your source files?
NameOfMainProject/scripts/**.js (wherever the scripts are, you can add more than one but don’t worry too much as you can modify the config later manually).
Should any of … be excluded?
[empty, press enter]
Do you want Karma to watch … on change?
yes

On finishing answering those questions, press enter once more to generate the config file, which is a .js file that you can edit on Visual Studio. As the file is in the main folder of the solution it won’t be part of any of its projects so right click on the solution folder inside Visual Studio -> Add existing file -> select the karma.conf.js file. That will allow you access to the config file from Visual Studio easily.

Mocha

Karma seems to be set up by default to use Jasmine, but Mocha seemed a better option to me so I decided to go for this one instead (anyway, I had to install Jasmine if I wanted to use it so better go the way I want directly). You can download the Mocha binaries from here, but using npm seems faster and easier:

npm install -g karma karma-mocha karma-mocha-debug

Chai

I also had to install Chai which is a framework to write unit tests in javascript (which is, it includes lots of methods like expect() or assert() to write the tests). Let’s install it globally:
npm install -g chai karma-chai

Note that Chai is another framework that Karma needs to know about, if when generating the Karma config file you didn’t add this one (and if you were following this guide you didn’t) then open the config file (karma.conf.js) and make sure that chai is added to the frameworks list:

frameworks: ['mocha', 'chai']

Sinon

Now we will also need Sinon to generate mocks and stubs, and as Angular modules have dependencies, we imperatively need to use mocks to test angular apps. So let’s install sinon and sinon-chai to extend chai with sinon:
npm install -g sinon karma-sinon

And then, don’t forget to include it on the config file!!
frameworks: ['mocha', 'chai', 'sinon'],

Alternative installation for Chai and Sinon

As Chai and Sinon work so well together there’s a shortcut to install and use them with the plugin karma-sinon-chai. Just install it like this:
npm install --save karma-sinon-chai

And then include it on the config like this:
frameworks: ['mocha', 'sinon-chai'],

Note: This gave me some problem in combination with requirejs or something else I can’t remember which was fixed by using the isolated chai and sinon installations.

Testing the testing system: Hello World!

Now, just to test that all the installation worked, add a javascript to your tests project that should be referenced on the Karma config file (this is, just make sure you place it in a folder that’s included in the files section of Karma config) and write this Hello World test that doesn’t test anything but should allow you to test that the testing system is working:
describe('HelloWorld!', function() {
it('should be equal', function() {
assert('Hello World' === 'Hello World');
});
});

To execute it, just open cmd, go to the main folder of your solution (where the config file is saved) and execute “karma start”. That should execute karma using the values set on your config file, if everything was installed properly, and the config file is set up properly, and the test it’s on its place it should run and succeed.

Including RequireJS

RequireJS gave me many headaches, to use requireJS with Karma you need to install this plugin:
npm install -g karma-requirejs

And don’t forget to include it as a framework on the karma config:
frameworks: ['mocha', 'requirejs', 'sinon', 'chai'],

If you run the “karma init” again now, and you answer “yes” to the question “Do you want to use require.js?” Karma will generate a test-main.js config file that you can edit to set up your requireJS loading. But to know how to configure it it’s better that you read this other post I wrote: Configuring Karma to test Angular apps using RequireJS

In any case, once you have it installed you have all you need to go, the rest consists on configuring everything and testing 🙂

Chrome launcher

Finally, let’s not forget about this plugin to allow karma to launch Chrome as that’s my default browser (you can install or run others too, like PhantomJS):
npm install -g karma-chrome-launcher

Quick Summary

Just install Node.js and run:
npm install -g karma mocha karma-mocha karma-mocha-debug sinon karma-sinon chai karma-chai requirejs karma-requirejs karma-chrome-launcher

Then set the frameworks at the config file:
frameworks: ['mocha', 'requirejs', 'chai', 'sinon'],