WEBINAR: Why Test Automation Fails: Test Design and Implementation Tips REGISTER NOW

Karma JS Testing: What, Why, and How to Get Going Right Now

Automated testing is a must for any modern software development organization. That's why you must know and master tools in…

By Testim,

Automated testing is a must for any modern software development organization. That’s why you must know and master tools in that space if you have any hope of producing high-quality code. Fortunately, there is a huge variety of testing tools available. These tools cater to virtually every need of a comprehensive testing strategy. When it comes to tools used in Angular unit testing—or even vanilla JavaScript testing, for that matter—no tool is better known than Karma (sometimes also called “Karma JS.”)

Karma is a testing tool developed by the AngularJS team, so it’s understandable why it’s usually associated with the framework. However, there’s nothing preventing you from using Karma with regular JavaScript apps.

In today’s post, we offer a guide to testing with Karma. We start with definitions, by explaining what Karma is, why you would want to use it, and which role it plays in the vibrant—and sometimes a bit chaotic—JavaScript testing landscape.

Then we advance to the more hands-on part, where you’ll learn how to install and configure Karma. Before wrapping up, we share some final considerations and additional tips. Let’s begin!

Karma JS Fundamentals

Let’s start with the most basic questions. What is Karma? Why should you care? That’s what we’re going to see in this section.

Defining Karma

Before we explain what Karma is, it makes sense to explain what it’s not.

Karma isn’t a testing framework. So, it isn’t a competitor to tools like Mocha, QUnit, or Jasmine, to name a few. Instead, Karma works with them, so you’ll have to pick a testing framework to use. There are available plugins for the most well-known testing frameworks. Alternatively, you can also write an adapter for your favorite testing framework, if there isn’t one already.

Another thing that Karma isn’t is an assertion library. So, tools like Chai or Should.js aren’t competitors to Karma.

So, what is Karma after all? Karma is a test runner. But why do you need it?

Why Karma?

You might be wondering what’s the point of using Karma. Since you’d still need a testing framework, what’s the point of using an additional tool? What’s the value added by Karma?

The main selling point of Karma is the ability to run tests against real browsers and real devices, which makes your testing strategy more robust and reliable. Since different browsers can have different DOM implementations, testing against all of them—or at least most of the major ones—is essential if you want to ensure your application will behave properly for the majority of its users.

Besides, we live in an era of not only plenty of browsers but also plenty of devices. Phones, tablets, you name it. Karma also allows you to run tests against them.

Karma also makes it easy for developers to continuously run their tests without leaving their terminal or IDEs since it can re-run the tests every time the files change.

Getting Started With Karma

With the basics out of the way, we’re ready to roll-up our sleeves and start doing some work. Let’s start by installing Karma.

Installing

We’ll use npm to install Karma. That means you must have Node.js installed. If you don’t already have it, please download it and install it before progressing through the guide.

Installing Karma is super easy. First, we’re going to show you how to install it globally (though that’s not the recommended approach). Just run the following command:

By installing Karma globally, you’ll have access to the “karma” command no matter your current location. To verify whether the installation was successful, just run “karma –version” and you should see the current version number.

However, as we’ve just mentioned, the global installation isn’t the recommended approach, and we’ve just mentioned it for completion’s sake. What you should do instead is to install Karma locally for each project. You do that by running the following command from your project’s directory:

You’re also going to need specific plugins, depending on the other testing tools you use. For instance, the following line installs the karma-mocha plugin (required to use the Mocha testing framework), and the karma-chrome-launcher and karma-firefox-launcher plugins (necessary to test against Chrome and Firefox.) Finally, the plugins are all saved as devDependencies in the packages.json configuration file.

Running

To run Karma, you will need to run the following command, from your project’s root folder:

Writing the complete path above gets old really quick, though. Instead of doing that, you might want to install the karma-cli tool globally, by running this:

With that installed, you’ll be able to just run “karma” no matter your current location, and the local version will run.

Configuring

You configure Karma via a config file. It’s possible to create the config file either by hand or by using the “karma init” command and answering the questions asked. Alternatively, you could also just copy a config file from a different project.

You can write the configuration file using JavaScript, CoffeeScript, or TypeScript. When running Karma, you can provide the path to the configuration file as an argument. If you don’t do so, the Karma CLI will look for a configuration file which matches one of the following names:

./karma.conf.js
./karma.conf.coffee
./karma.conf.ts
./.config/karma.conf.js
./.config/karma.conf.coffee
./.config/karma.conf.ts

When you generate the config file by running “karma init,” you’re asked several questions. Here’s an example of the questions along with their answers:

With the answers above, we inform Karma, among other things:

  • Jasmine will be our testing framework
  • where our tests are located, and our production code as well
  • we want Chrome to be automatically captured
  • we want Karma to watch the files and run the tests again as they change

The resulting config file should look like this:

With this configuration done, you should be able to run “karma start” and see a new Chrome window like the one below:

What Now?

As pointed out, Karma is neither a testing framework nor an assertion library. You don’t write tests using Karma. Instead, you use the testing framework you already know and love, be it Mocha, Jasmine, or others. What Karma will do is to automatically run your tests every time the files change, ensuring they work against a variety of browsers and devices.

By following the examples in this post, you should by now have a template for running your tests with Karma.

What are the next steps for you? In short, play and tweak with the basic setup we’ve got here. For instance, the config file of our example uses Jasmine. Configure Karma to use Mocha or another framework. Also, there is life beyond Chrome! Test using browsers others than Chrome.

Finally, stay tuned for more JavaScript-related QA content right here on the Testim blog. Thanks for reading, and until next time.

This post was written by Carlos Schults. Carlos is a .NET software developer with experience in both desktop and web development, and he’s now trying his hand at mobile. He has a passion for writing clean and concise code, and he’s interested in practices that help you improve app health, such as code review, automated testing, and continuous build.

Testim's latest articles, right in your inbox.

From our latest feature releases, to the way it impacts the businesses of our clients, follow the evolution of our product

Blog Subscribe