角度单元测试：TypeError：$controller 不是函数答案

【问题标题】：Angular unit test: TypeError: $controller is not a function角度单元测试：TypeError：$controller 不是函数
【发布时间】：2017-01-03 02:51:30
【问题描述】：

我正在为使用 webpack 构建的 Angular 应用程序设置单元测试，但在运行我的第一个简单测试时却遇到了这个错误。

TypeError: $controller is not a function

控制器代码如下：

 (function() {
  'use strict';
    angular
      .module('dpServerV2WebappRev2App.controllers')
      .controller('MainCtrl', MainCtrl);
        MainCtrl.$inject = ['$scope'];
        function MainCtrl($scope) {
          $scope.x = 'x';
      }
    })();

测试如下所示：

describe('MainCtrl', function () {

  beforeEach(module('dpServerV2WebappRev2App.controllers'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  describe('$scope.brand', function () {
        it('should match the brand portal name', function () {
            var $scope = {};
            var controller = $controller('MainCtrl', { $scope: $scope });
            expect($scope.x).toEqual('x');
        }); 
    });

});

为了更清楚地说明问题，我注释掉了我测试$scope.x 的测试代码并将其替换为：

expect(1).toEqual(1);

因此我得到了这个错误

 at Error (native)
        at node_modules/angular/angular.min.js:6:412
        at node_modules/angular/angular.min.js:40:134
        at r (node_modules/angular/angular.min.js:7:355)
        at g (node_modules/angular/angular.min.js:39:222)
        at Object.db [as injector] (node_modules/angular/angular.min.js:43:246)
        at Object.workFn (node_modules/angular-mocks/angular-mocks.js:3067:5

我已经在测试中注释掉了我的模块注入，现在测试通过了，但是当包含模块时仍然出现上述错误：没有问题的新测试代码：

describe('MainCtrl', function () {
  describe('$scope.brand', function () {
        it('should match the brand portal name', function () {
            expect(1).toEqual(1);
        }); 
    });

由于对我来说似乎是配置问题，我将添加我的 Karma 配置文件：

var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'node_modules/angular/angular.min.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'assets/app.bundle.js',
      'app/*.js',
      'tests/**/*.test.js'

    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './assets/app.bundle.js': ['webpack'],    
    },

    webpack: webpackConfig,

     webpackMiddleware: {
      noInfo: true
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

【问题讨论】：

你的角度版本是什么？你安装angular-mocks了吗？
您好，Angular 版本是 1.5.7，是的，Angular 模拟已安装并包含在 Karma.conf.js 文件以及 Angular 中
@GonzaloPincheiraArancibia 请检查我的问题编辑。

标签： angularjs unit-testing webpack

【解决方案1】：

在处理服务时，使用 angular mocks 有时会很奇怪。试试这个

describe('MainCtrl', function () {

      beforeEach(module('dpServerV2WebappRev2App.controllers'));

      var controllerInjector, myController;

      beforeEach(inject(function($controller){
        controllerInjector = $controller;
      }));

      describe('$scope.brand', function () {
            it('should match the brand portal name', function () {
                var $scope = {};
                myController = controllerInjector('MainCtrl', { $scope: $scope });
                expect($scope.x).toEqual('x');
            }); 
        });

});

演示：http://codepen.io/gpincheiraa/pen/jAgNpW

【讨论】：