使用 angular-mocks/jasmine 测试服务 - TypeError: undefined is not an object答案

【问题标题】：Testing service with angular-mocks/jasmine - TypeError: undefined is not an object使用 angular-mocks/jasmine 测试服务 - TypeError: undefined is not an object
【发布时间】：2016-11-24 16:53:31
【问题描述】：

我正在尝试使用 jasmine/karma/phantomJS 在我的 Angular 应用程序中测试一个简单的服务。

茉莉版本：2.4.1 角度/角度模拟：1.5.7 phantomJS：2.1.1

QueryParameters.service.tests.js ：（QueryParameters.service.js 是 app.service 模块的一部分，实际上是一个工厂，而不是服务）

describe('myApp.QueryParametersService', function() {

  var QueryParametersService;

  beforeEach(module('myApp'));
  beforeEach(module('app.service'));
  beforeEach(inject(function ($injector) {
    QueryParametersService = $injector.get('QueryParametersService');
  }));

  var testObject = {
    name : 'Hans',
    age  : '27'
  };

  it('Should output correct querystrings', function() {
    expect(QueryParametersService.toQueryParams(testObject)).toBe('?name=Hans&age=27');
  });

});

QueryParametersService.js：

(function() {
  'use strict';

  angular.module('app.service')
    .factory('QueryParametersService', QueryParametersService);

  QueryParametersService.$inject = [];

  function QueryParametersService() {

    var service = {
      toQueryParams : toQueryParams
    };

    return service;

    function toQueryParams(queryObject) {
      <removed code here>
    }
  }
})();

在 Gruntfile.js 中：

karma: {
      unit: {
        options: {
          frameworks: ['jasmine'],
          singleRun: true,
          browsers: ['PhantomJS'],
          files: [
            '<%= yeoman.client %>/bower_components/angular/angular.js',
            '<%= yeoman.client %>/bower_components/angular-mocks/angular-mocks.js',
            '<%= yeoman.client %>/app/app.js',
            '<%= yeoman.client %>/app/filters/filter.module.js',
            '<%= yeoman.client %>/app/directives/directive.module.js',
            '<%= yeoman.client %>/app/services/service.module.js',
            '<%= yeoman.client %>/app/services/tests/*.js'
          ]
        }
      }
    }

我的主模块（在 app.js 中）声明如下：

  angular.module('myApp', [
    'angular-thumbnails',
    'angularUtils.directives.dirPagination',
    'app.directive',
    'app.filter',
    'app.service',
    'color.picker',
    'ngCookies',
    'ngFileUpload',
    'ngImgCrop',
    'ngMaterial',
    'ngMessages',
    'ngResource',
    'ngSanitize',
    'ui.router',
    'validation.match',
  ])

运行测试时遇到的错误：

PhantomJS 2.1.1 (Mac OS X 0.0.0) myApp.QueryParametersService Should output correct querystrings FAILED
        /<filepath>/client/bower_components/angular/angular.js:4632:53
        forEach@/<filepath>/client/bower_components/angular/angular.js:321:24
        loadModules@/<filepath>/client/bower_components/angular/angular.js:4592:12
        createInjector@/<filepath>/client/bower_components/angular/angular.js:4514:30
        workFn@/<filepath>/client/bower_components/angular-mocks/angular-mocks.js:3067:60
        TypeError: undefined is not an object (evaluating 'QueryParametersService.toQueryParams') in /<filepath>/client/app/services/tests/query-parameters.service.tests.js (line 65)
        /<filepath>/client/app/services/tests/query-parameters.service.tests.js:65:34
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.002 secs / 0.009 secs)

我哪里错了？

【问题讨论】：

看起来 QueryParametersService.js 没有包含在 karma.conf.js 文件中？
这里包含：'/app/services/service.module.js',
其实，@jchen86，你是对的。我认为包括整个服务模块就足够了，但特别是包括服务解决了我的问题。

标签： javascript angularjs unit-testing phantomjs karma-jasmine

【解决方案1】：

正如@jchen86 所指出的，QueryParametersService.js 没有包含在配置中（我认为当我包含整个服务模块时会包含它）。通过更改 gruntfile 以包含服务文件夹中的所有 js 文件来解决：

'<%= yeoman.client %>/app/services/*.js'

【讨论】：