Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:25Length:2.9 hours
  • Overview
  • Transcript

2.4 Running Karma Tests

In this video, we’ll learn how to run our tests automatically using Karma and Node.js, without needing to open a browser.


  • The command to install the Karma command line tools is given incorrectly. The correct command is
    npm install karma-cli --global.
  • In order to resolve the Can not load "mocha", it is not registered! error, Daniel suggests installing karma-mocha globally. This is not necessary: the problem is instead solved by installing the karma-mocha-reporter module with
    npm install --save-dev karma-mocha-reporter.

Related Links

2.4 Running Karma Tests

In this next video, we'll be installing karma into our app. Now, we saw in our previous demo, the serve test function, how we were able to serve our tests in a browser. Well, that's good, but sometimes we don't want a whole browser. Sometime we just want to run our test as quickly and as efficiently as possible. For that, we need Karma. Karma rather than running our test in Chrome, runs them in the background,. Often through a program called Fandom JS, which we'll be using in this tutorial series. Let's take a trip over to our package.json file. We can see in our dependencies what we've installed. We have not installed karma yet, so let's do that. Open up your terminal. And now type, npminstall__save. And we'll need a few things here. So let's install Karma and Mocha. We need Mocha both in npn in. We could use some sort of isomorphism, but that's not necessary in this tutorial. Two packages will be fine. We'll also need the Karma command line tool, which means installing it globally. So type npm install Karma, and add the global flag. Now with Karma, you must have a Karma config file to tell Karma how to run. Let's create one now. In the base directory, create a new file, and call it karma.conf.js. The conf stands for configuration not conference. Now since this is an npm package, it cares about what the exports are. So we'll use a little bit of npm magic and say, module.exports equals a function. And that function will take one argument. And we'll just call that argument, config. And config has a method called set, which takes the configuration object. So it's really the karma config that we're talking about. And we can say config.set And in this object we put our settings. First things first, is browsers, which is an array. Now the idea behind Karma is that it's supposed to be able to run your tests in all browsers. So you would use Karma to say, run your Chrome Tests right after your Firefox tests, right after your IE tests. Like, say, they do at Lodash, where they test on every browser. However, the alternative is to just use the simplest, fastest browser, which for testing, is probably PhantomJS. Let's type that in This will tell Karma to run all our tests in the virtual browser, PhantomJS. Next, we'll specify the frameworks. Karma let's you use any testing framework really, but we want to use Mocha because Mocha gives us access to describe and it keywords. Finally, we need to have an array of files. This includes all the files that karma will load in order. There's a bit to type in, so let's go ahead and do it. We're gonna need Angular and Chi from Bower components. So let's type that in. Next, and we'll just denote this with an extra space after, we need our app files, which is just main.js. But, we'll include a star to make sure we catch it. Now, if that wasn't enough, don't worry. There's more. We also need to include our tests in our karma.conf file. So let's include a link down to our main.spec.js. I just use the star here, since that's pretty convenient. And our karma conf is looking good. There' s gonna be some more we add because well, karma conf can get huge as you configure it to use Chrome, and Istanbul, and Firefox. So, don't worry. We'll be revisiting this delightful file soon, but it should be good for now. Before we test it out, we have one more dependency to install. The framework mocha isn't just mocha. It's actually a special plugin called karma mocha. We have to install this. Here in the terminal window, type npm install --save karma mocha. Now let's go down to our gulpfile. And we'll add var require karma. We'll say var karma = require karma. And then, we'll say .server, since that's the part of Karma we want. Now, we'll add a new task, and we'll call that task test browser. And we'll say karma.start. Pass it the configuration file, which is karma.conf.js. Dirname is just a variable that's automatically a directory of wherever this gulp file is running. We'll pass singleRun: true because we only want it to run once. And we'll pass an array of reporters. And just pass mocha. All right, that's looking good. Let's give our gulp task a shot, with gulp test browser. Hm, it gets an error. Can not load PhantomJS. Well, that's because we need karma PhantomJS launcher as well. Let's type npm install --save-dev. And we'll say karma-phantomjs-launcher. And now, let's give it a shot with gulp test browser. Hm, looks like it's still not working. This is tricky. The reason is that Karma is installed globally in our global directory. Sometimes npm is confused if we want the local Karma or the global Karma. This is resulting in Karma not finding its dependencies. Let's fix this. Let's type, npm install -g karma-mocha karma-phantomjs-launcher. This will install them globally. Now, give it a shot with karma start And we say it's executed one out of one tests successfully. Let's see if our gulp task works now. It certainly does. Now, we can run karma tests automatically from gulp. Very cool. In the next and final introductory video, we'll setup a simple back-end server.

Back to the top