Initialize a Webpack Project with Karma for Testing

[00:00] To set up our project to use Karma for testing, we're going to need to do a few things. We'll start out by installing a couple dependencies. We'll NPM install as dev dependencies, Karma, karma-chrome-launcher to launch Chrome to run our tests, and then Mocha for our testing framework, and then karma-mocha to make testing with Mocha and Karma a little easier.

[00:24] We'll go ahead and install these dependencies. With these dependencies installed, we can verify that here in our package.json. We have those there. We're now going to initialize Karma. To do this, we're going to run in the node_modules directory in the bin, Karma.

[00:40] As we just installed Karma, the Karma binary is now available in our node_modules directory, and we'll run the init script. Here, we're going to be using the Mocha framework. We will not be using RequireJS. We will be using Chrome.

[00:54] It needs to know where we're going to be putting our test files. I'll go ahead and create a test file right now, controller.test.js, right next to the controller.js file. Our test files will be in source/js/***.test.js.

[01:10] We'll use that glob so that it goes through the entire JS folder recursively. We don't need to exclude any patterns. That will capture only the patterns we want to include. We'll go ahead and ask Karma to not watch all the files, and run tests on change. We'll do that ourselves elsewhere.

[01:30] We can look at our Karma config file that was generated for us. I'm going to go ahead and clean this up a little bit. With that cleaned up, let me go ahead and explain a little bit what's going on here. We have a function that is being exported from this module.

[01:44] I just call it set Karma config. It accepts a config, and it sets this object on this config. This object has a base path. That just means that the files, exclude, and preprocessors, those values will be relative to that base path. We just left it at the default of an empty string.

[02:01] The framework we chose is Mocha, and so it's going to use the karma-mocha plugin to load Mocha for our testing framework. The files that we want to load into the browser are files that match this glob. We don't need to exclude anything. I'll just remove that.

[02:16] We will need preprocessors eventually, but we'll add that a little bit later. I'll remove that. Our reporters, we're just going to use the default progress reporter. The port is the default. We'll leave the colors the same, and the log level.

[02:30] Auto-watch is false, and we'll add a watch mode a little bit later. The browsers is Chrome. We could add Firefox, and Internet Explorer, and different browsers here, but we'll just stick with Chrome. Single-run, we're actually going to set to true here.

[02:45] We'll set up a watch mode here in a little bit. Concurrency is infinity. That's the default there. Let's go ahead and add a little test here. I'll just go ahead and paste that in. With that, we're going to want to add a test script to our package.json script so that we can run the test when we like.

[03:04] We'll add test here, and it will simply be Karma start. We'll default to using this Karma cont file, so it will load our options that we specified in there. If we run NPM t, which is short for NPM test, it goes ahead and runs all of our tests.

[03:20] It executed the one test that we have successfully, and we're good to go. Let's go ahead and just add a watch mode as well, watch test. This is great for doing test-driven development. You run the test every single time you make a change to the code base.

[03:38] Here, we'll run NPM test, the exact same as this script, but we're going to pass along a couple arguments, auto-watch, and no single-run. With that, we can run NPM run watch test. We can start developing.

[03:58] It's run one test. If we add another here, it runs our test again. We have two successful tests. If we go ahead and throw a new error, failure, then we're going to get that one of our tests failed. We're good to go with our watch mode.

[04:17] Let's go ahead and review really quickly what we had to do to set this up. First, we installed a couple dependencies, Karma, karma-chrome-launcher, and karma-mocha, and then the Mocha testing framework.

[04:29] We ran Karma init. In the node_modules bin, we have this Karma binary right here. We utilized that in our command line to run the init script. Karma generated this for us. We made a few slight modifications, simply changing single-run, as well as removing a couple unneeded properties.

[04:51] We created our controller test file, where we added a couple of tests. We added our test and watch test scripts so that we could run these regularly as we're developing our code. One last thing that we're going to do while we're here is we have this validate script that runs as part of our pre-commit hooks.

[05:09] We're going to go ahead and add the test script to the things that are run every single time we commit, that way we don't push any commits that are going to break our test. That's how you initialize your project Karma config.