'Error: Unexpected request' during Karma Angular Unit Test

Question

When running grunt karma, a test on one of the directive fails when it tries to fetch the template. I am using ng-html2js as a preprocessor. Here is some of my karma.conf.js

plugins: ['karma-chrome-launcher',
          'karma-jasmine',
          'ng-html2js',
          'karma-ng-html2js-preprocessor'],

preprocessors: {
  'app/scripts/directives/**/*.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {
  moduleName: 'templates'
}

In my test, I have the following:

'use strict';

describe('Directive: myDirective', function () {

  // load the directive's module
  beforeEach(module('myApp'));
  beforeEach(module('templates'));

  var element,
    scope;

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
  }));

  it('should not show search area initially', inject(function ($compile) {
    element = angular.element('<navbar></navbar>');
    element = $compile(element)(scope);
    scope.$digest();
    expect(element.find('.myClass').hasClass('myClass')).toBe(true);
  }));
});

When I run the test, I get

Error: Unexpected request: GET /scripts/directives/myDirective/myDirective.html

It seems like the preprocessor is not properly injecting the javascript version of the template.

I have also tried using the path of the template in the beforeEach(module('')); but that causes an error that reads:

Error: [$injector:modulerr] Failed to instantiate module...

How can I fix this?

Answer 1

I had kind of the same problem. Be sure you have the exact file match. Open the Google chrome console and check the file path is exactly the same.

In the upper exemple, I had to add a "/" string in ngHtml2JsPreprocessor.stripPrefix and it worked. So I guess with Yeoman, you should use

ngHtml2JsPreprocessor: {
  moduleName: 'templates',
  stripPrefix: 'app/' //add a slash
}

Answer 2

Since I was using the Yeoman tool to scaffold my project, I needed to add a stripPrefix to the ngHtml2JsPreprocessor option in my karma.conf.js file:

ngHtml2JsPreprocessor: {
  moduleName: 'templates',
  stripPrefix: 'app'
}