Question

我正在使用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
  })
}

Answer 1

使用角度模拟，当我们处理服务时，有时候会非常奇怪。试试这个

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

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

1 个答案: