使用 karma 和 jamis 进行 Angular 单元测试

Posted 2023-03-16

【中文标题】使用 karma 和 jamis 进行 Angular 单元测试

【英文标题】：Angular Unit Testing with karma and jamis

【发布时间】：2019-07-01 06:26:46

【问题描述】：

我已经设置了我的 Angularjs 应用程序，用于使用 Karma 和 Jasmin 进行单元测试。但是当我尝试使用karma start 运行我的测试用例时，我收到错误名称为Myctrl 的控制器未注册。

我的应用结构如下

project-folder
  - app
    - components
      - controllers
        - account
          - signInController.js
          - SignUpController.js
  - app.modules.js
  - app.routes.js
  - test

这是我的 app.modules.js

let app = angular.module( 'app', [
  'app.config', 'templates', 'ngAnimate', 'ngAria', 'ngCookies', 'ngMessages', 'ngResource', 'ngSanitize',
  'ngTouch', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.load', 'ui.jq', 'oc.lazyLoad','angular-cache',
  'ngToast', 'ngFileUpload', 'ngFileSaver', 'angularMoment', 'angulartics', 'angulartics.google.analytics',
  'ngMessages', 'ng.httpLoader'
]);

还有 karma.config.js 文件

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', 'browserify'],

    // list of files / patterns to load in the browser
    files: [
      'dist/libs/jquery/jquery.js',
      'dist/libs/angular/angular.js',
      'dist/libs/angular-ui-router/angular-ui-router.js',
      'dist/libs/angular-sanitize/angular-sanitize.js',
      'dist/libs/angular-mocks/angular-mocks.js',
      'dist/libs/angular-bootstrap/ui-bootstrap-tpls.js',
      'app/app.modules.js',
      'app/app.routes.js',
      'app/config.lazyload.js',
      'app/components/controllers/account/*.js',
      'test/**/*spec.js',
      ],
      . 
      .

describe('Myctrl Test', function() 

  describe('Myctrl', function() 
    var vm;

    beforeEach(inject(function( ) 
      angular.module('app')
    ));

    beforeEach(inject(function(_$rootScope_, $controller) 
      var scope = _$rootScope_.$new();
      vm = $controller('Myctrl', $scope: scope);
    ));

    it('test controller', function() 
      expect(vm.title).toBe(null);
    );

  );

);

app.controller( 'Myctrl', ['$scope', '$state', 'backendApi', 'ngToast', 'access_token', 'FileUploader', 'keys',
function( $scope, $state, backendApi, ngToast, access_token, FileUploader, keys ) 

  $scope.title = "Hello";


])

【问题讨论】：

另外，我尝试将app.modules.js 中存在的所有模块包含在karma.conf.js 中，但我仍然面临同样的问题，控制器未注册。

添加您的规范文件

请把它添加到您的问题中，当我在 cmets 中阅读代码时，我的眼睛在流血

@LuninRoman 请检查我已经添加了我的规范文件

@LuninRoman 控制器代码也添加了

【参考方案1】：

在每次测试之前，您必须注册一个模块。

问题是您尝试了原生 AngularJS angular.module('app')，而您必须使用 module('app')，它是 angular.mock.module 的别名

此函数注册一个模块配置代码。它收集了 注入器启动时将使用的配置信息 由注入创建。

将您的代码更改为

beforeEach(function( ) 
  module('app')
);

并确保Myctrl 属于app 模块。

考虑以下article Testing a Controller 部分。

仅供参考：angular.module('app') 仅用于在 Angular 应用程序中引用模块，但此函数实际上不包括模块。

【讨论】：

对于模块（'app'）代码我收到错误。 TypeError: module is not a function

这是另一个问题，angular-mocks.js 文件有问题。您确定该文件存在您指定的路径吗？ ***.com/questions/13334749/…

是文件存在dist/libs/angular-mocks/angular-mocks.js。

尝试angular.mock.module('app') 而不是module('app')

angular.mock.module('app') 有了这个我可以初始化我的应用程序。但得到另一个问题。 require is not defined.