Karma tests failing due to missing dependencies

When Karma tests fail due to missing dependencies, it typically means that the required libraries, modules, or files were not correctly included in the Karma test runner configuration. Let’s walk through this problem step by step — from understanding the issue to resolving it fully. This guide is tailored for AngularJS environments using Karma with Jasmine as the testing framework.

What Are Karma and Jasmine?

Karma is a test runner developed by the AngularJS team that lets you run your tests in various real browsers.
Jasmine is a behavior-driven development framework for testing JavaScript code.

The Problem

You run:

karma start

And see errors like:

Error: [$injector:unpr] Unknown provider: myServiceProvider <- myService

ReferenceError: angular is not defined

Module 'appName' is not available! You either misspelled the module name or forgot to load it.

This means one or more required files (dependencies) were not loaded into Karma properly.

Step-by-Step Troubleshooting & Fix

1. Check `karma.conf.js` for `files` array

In your karma.conf.js, the files array must include all necessary libraries and source files in correct order.

Example:

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'node_modules/angular-route/angular-route.js',

  // Your app files
  'src/app/**/*.js',

  // Your test files
  'test/**/*.spec.js'
],

Common Mistake: Missing angular-mocks.js or loading test files before your app code.

Fix: Ensure angular.js, angular-mocks.js, and all other module dependencies are loaded first.

2. Add all external library dependencies

If your app uses other libraries (like Lodash, jQuery, Bootstrap, Moment.js), make sure they are added too.

files: [
  'node_modules/jquery/dist/jquery.js',
  'node_modules/lodash/lodash.js',
  'node_modules/moment/moment.js',
  ...
]

Otherwise, references to $, _, or moment will throw ReferenceError.

3. Include All AngularJS Modules Used

If your app uses modules like ngAnimate, ngMessages, ui.router, etc., include their respective JS files.

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-animate/angular-animate.js',
  'node_modules/angular-messages/angular-messages.js',
  'node_modules/@uirouter/angularjs/release/angular-ui-router.js',
  ...
]

4. Make Sure to Include `angular-mocks.js`

Angular’s $httpBackend, $controller, and other testing utilities are provided by angular-mocks.js, which must be present.

Fix:

'node_modules/angular-mocks/angular-mocks.js'

Place it after angular.js but before test files.

5. Check the Module Name in Your Tests

Ensure the module name in your test matches the app’s module:

beforeEach(module('myApp')); // Must match angular.module('myApp', []) in your app

Wrong module name causes:

Module 'myApp' is not available!

6. Mock All Dependencies in Unit Tests

If your controller or service depends on another service (e.g., authService), either include the service or mock it.

Fix Example:

beforeEach(module(function($provide) {
  $provide.service('authService', function() {
    this.login = function() {};
  });
}));

7. Check the Test Path Patterns

Some tests may be ignored because they don’t match the pattern or file extension.

Fix: Ensure your karma.conf.js uses correct patterns:

files: [
  'src/**/*.js',
  'test/**/*.spec.js'
],

And that your test files are named with .spec.js or .test.js.

8. Install All NPM Packages

Make sure all dependencies are installed using:

npm install

You may also run:

npm list

To check for missing packages.

9. Use `karma-webpack` or `karma-browserify` if Using Modules

If you’re using import / export syntax (ES6 modules or CommonJS), you need a preprocessor like Webpack or Browserify.

Example (karma.conf.js):

preprocessors: {
  'src/**/*.js': ['webpack'],
  'test/**/*.spec.js': ['webpack']
},

And ensure karma-webpack is installed.

10. Check Console Logs for Clues

When Karma runs, look for logs like:

WARN [web-server]: 404: /node_modules/angular/angular.js

This means the path is incorrect or the file doesn’t exist.

Clean Build and Restart

Sometimes caches cause issues.

Run:

rm -rf node_modules
npm install
karma start

Or use:

npx karma start

Summary

Step	Fix
`files` in `karma.conf.js`	Include Angular, angular-mocks, app, and test files in the right order
External libraries	Include Lodash, jQuery, etc.
Angular modules	Include all used modules (e.g., `ngRoute`, `ui.router`)
`angular-mocks`	Always include this for unit testing
Module name	Match the name in `beforeEach(module('myApp'))`
Missing services	Mock dependencies using `$provide`
Preprocessors	Use Webpack/Browserify if using modules
File patterns	Ensure `.spec.js` files are included
npm dependencies	Run `npm install` to resolve missing packages