Install and Configure Karma Test Runner

Why to Automate?

Let the rant begin! First, the reason we test our code is to find out the defects and errors that were introduced during the development phases. I have been part of many projects in which developers used to update a small piece of code and then manually open their browsers to verify that it still works and behaves as they expect it to. This approach, called manual QAing (in this case Dev Testing rather) is non scalable and time consuming approach that can never ensure a smooth product shipping.

Let’s say, if a feature or function is removed, can every developer/QA figure out, all the potential side-effects? Do all the developers/QAs do the testing in same way? Probably not. And hence the biggest downside of manual testing is: “As features and codebases grow, manual QAing becomes more time consuming, expensive and error prone”. These are just some of the reasons why automated testing is the best (and only) way to prevent software defects.

Karma – a Javascript Test Runner:

Karma is a well known test runner for JavaScript that runs on Node.js. It is very well suited for testing JavaScript projects.

We use Karma to run tests using any of of the popular JavaScript testing frameworks such as Jasmine, Mocha etc. and have those tests executed not only in the browsers of our choice, but also on the platform of our choice i.e. desktop, phone or tablet. Karma is highly configurable that can be integrated with popular continuous integration services like CircleCi, Jenkins, Travis or Semaphore and has excellent plugin support.

Prerequisite

Karma runs on Node.js and is available as NPM package. So, to set up Karma test runner, we need Node with NPM already installed. Then, we install karma and other required plugins.

Installing Karma and plugins:

The most recommended approach is to install Karma (and all the plugins our project needs) locally in the project’s directory.

Command to install Karma:

npm install karma –save-dev

Command to install plugins that our project needs:

npm install karma-jasmine karma-chrome-launcher –save-dev

The above commands will install karma, karma-jasmine and karma-chrome-launcher packages in node_modules directory within current working directory and also save these as dev dependencies in package.json. The benefit of doing so is, any other developer working on the project will only have to do “npm install” so as to get all these dependencies installed.

Configuration:

Karma needs to know about the project in order to test it and this is done using a configuration file. So, we must configure Karma before we run it. This is one of the most important step in setting up Karma. The easiest way to begin is to run the init command. In a command window, we navigate to our project folder and enter “karma init” that creates a configuration file with its default name i.e. karma.conf.js in the same folder. If we want this file to be of a particular name then we enter “karma init filename”. This asks us a series of questions that are easy to answer and then generates a properly structured Karma configuration file. We will need to answer the below questions:

– What testing framework do you want to use?

Jasmine, QUnit and Mocha are installed by default and these can be referenced by name, but if we install another one we should name it here. Each framework is a plugin, so we need to list the plugin file in the plugins section of the configuration file.

– Do you want to use Require.js?

Require.js is a lazy-loading framework, used by many developers, to minimize the initial loading time of script in the browser. If our project uses it, we need to answer YES to this question.

– Do you want to capture a browser automatically?

We should respond with the browser name(s) that we want to use, one per line. Note that we must have the corresponding –launcher plugin installed for each browser, but only the karma–chrome-launcher and karma–chromeCanary-launcher plugin are installed by default. When we enter a blank line, it will move us to the next question.

– What is the location of your source and test files?

We need to specify the pattern that defines the location of the test files (containing tests) to be involved in testing or excluded from it as well as the files that we plan to run our tests against. Here, we can use glob patterns like “test/*.js”, “src/*.js”, “test/**/*spec.js” etc. This path is relative to the location of Karma. We can enter an absolute path and be confident of directing Karma to the right location, or enter a relative path if our files are placed below the Karma folder.

– Should any of the files included by the previous patterns be excluded?

If we use a very broad pattern, we may want to exclude the folder where there are no .js files

to test, or where we store our images. Strong patterns occupy more lines in the configuration file, but also remove the requirement for an exclude block.

– Do you want Karma to watch all the files and run tests on change?

Karma running continuously is very helpful as we can see our tests and code produced in a TDD environment. If we don’t do TDD, we can select to run Karma only when we are ready to execute our tests.

Starting Karma:

To start Karma, We fire the following command in the project root where “karma.conf.js” file resides:

karma start

In case if we have explicitly named the “karma.con.js” file other than its default name then we fire:

karma start filename

Jasmine?

Karma is neither a testing framework nor an absolute library but it is just a tool that allows us to run our JavaScript test cases. Karma test runner supports many JavaScript testing frameworks and Jasmine is one of them. In the Karma-Jasmine testing environment, Karma runs the test cases written in Jasmine.

Jasmine is a behavior-driven framework for testing JavaScript code that works very well with Karma. Jasmine is dependency free and doesn’t require a DOM. Taking about the features, Jasmine has almost everything we need for testing built into it. The most exciting example would be spies. A spy allows us to “spy” on a function and track its attributes such as check if it was called, how many times it was called and with what arguments it was called. While in case of a framework like Mocha, spies are not incorporated and would require link up with a separate library like Sinon.js.

We are not covering Jasmine.

Summary:

Karma is the most preferred test runner within the JavaScript community. Its plugin architecture makes it flexible to other test suites which add price to the core of Karma. In agile or continuous integration environments, Karma shines as a crucial tool to development teams, providing an easy and authentic way to modify existing code and craft new code as part of TDD.

🔊 Listen