Angular Mock Inject throws error without message using Karma and Jasmine

Question

Using the angular.mock.inject(...) function when trying to unit test an Angular (Ionic) 1 application throws the following error. The strange thing is that there is no specific error message, making particularly hard to debug. No matter what I try, it always seems to throw this same non-descript error without any message.

PhantomJS 2.1.1 (Linux 0.0.0) LoginController should pass FAILED
    bower_components/angular/angular.js:4527:53
    forEach@bower_components/angular/angular.js:321:24
    loadModules@bower_components/angular/angular.js:4487:12
    createInjector@bower_components/angular/angular.js:4409:30
    WorkFn@bower_components/angular-mocks/angular-mocks.js:3160:60
    loaded@http://localhost:9876/context.js:151:17

Removing the call to angular.mock.inject() allows the test to pass.

Here's the test in question:

describe('LoginController', function() {

  var scope;
  var controller;

  beforeEach(angular.mock.module('mCommonJobs'));
  beforeEach(angular.mock.inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      controller = $controller('LoginController', {
          $scope: scope
      });
  }));

  it('should pass', function() {
    expect(true).toEqual(true);
  });

});

My bower dependencies:

  "dependencies": {
    "angular-resource": "#1.5.0",
    "ionic": "driftyco/ionic-bower#1.3.2",
    "ngCordova": "^0.1.27-alpha",
    "ng-cordova-oauth": "^0.3.0",
    "ngstorage": "^0.3.11",
    "angular-mocks": "^1.5.2"
  },
  "resolutions": {
    "angular": "~1.5.x"
  }

And the files set in the Karma test config:

files: [
  //Angular source
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-ui-router/release/angular-ui-router.js',
  'bower_components/ionic/js/ionic.bundle.js',
  'bower_components/ng-cordova-oauth/dist/ng-cordova-oauth.js',
  'bower_components/ngCordova/dist/ng-cordova.js',
  'bower_components/ngCordova/dist/ng-cordova-mocks.js',
  'bower_components/ngstorage/ngStorage.js',
  //App code
  'app/**/*.module.js',
  'app/**/*.js',
  'app/*.js',
  //Test files
  'test/**/*.test.js'
],

Your angular-mocks.js version should be exactly the same as your angular.js version. Your bower resolutions config is forcing Angular to version 1.5.x — Phil
@Phil I changed the version of angular-mocks to ^1.5.2. Same error. I'll update the question. — LanceLafontaine
FYI, you can (and should) make angular-mocks a devDependencies entry — Phil

LanceLafontaine LanceLafontaine · Accepted Answer · 2017-02-27T03:03:25

This issue was resolved by not including all of ionic.bundle.js in the files config of karma, but by specifically including its parts.

I also explicitly forced all versions of angular-related dependencies to be the same version (special thanks to Phil in the comments.).

In the end, my bower.json had:

  "dependencies": {
    "angular-resource": "1.5.2",
    "ionic": "driftyco/ionic-bower#1.3.2",
    "ngCordova": "^0.1.27-alpha",
    "ng-cordova-oauth": "^0.3.0",
    "ngstorage": "^0.3.11",
    "angular-mocks": "1.5.2"
  },

and my karma config looked like:

files: [
  //Angular source
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-ui-router/release/angular-ui-router.js',
  'bower_components/ionic/js/ionic.js',
  'bower_components/ionic/js/ionic-angular.js',
  'bower_components/ng-cordova-oauth/dist/ng-cordova-oauth.js',
  'bower_components/ngCordova/dist/ng-cordova.js',
  'bower_components/ngCordova/dist/ng-cordova-mocks.js',
  'bower_components/ngstorage/ngStorage.js',
  //App code
  'app/**/*.module.js',
  'app/**/*.js',
  'app/*.js',
  //Test files
  'test/**/*.test.js'
],

Angular Mock Inject throws error without message using Karma and Jasmine

1 Answers