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

     2023-03-16     266

关键词:

【中文标题】使用 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.

使用 karma 和 webpack 进行单元测试:_karma_webpack_ - 没有这样的文件或目录

】使用karma和webpack进行单元测试:_karma_webpack_-没有这样的文件或目录【英文标题】:UnitTestwithkarmaandwebpack:_karma_webpack_-nosuchfileordirectory【发布时间】:2016-07-2209:46:14【问题描述】:我正在尝试运行覆盖率(使用karma-coverage)和webp... 查看详情

使用 Angular 和 Jasmine/Karma 的私有方法进行测试和代码覆盖

】使用Angular和Jasmine/Karma的私有方法进行测试和代码覆盖【英文标题】:Testsandcode-coveragewithprivatemethodswithAngularandJasmine/Karma【发布时间】:2020-06-0219:06:18【问题描述】:所以,我在按钮组件上使用了这些方法。exportclassSidebarButtonC... 查看详情

markdown使用karma和jasmine进行测试-介绍(代码片段)

查看详情

使用 jasmine 和 karma 进行单元测试时形成数组错误

】使用jasmine和karma进行单元测试时形成数组错误【英文标题】:Formsarrayerrorwhileunittestusingjasmineandkarma【发布时间】:2021-01-1909:04:36【问题描述】:我正在为Angular应用程序版本9编写单元测试用例。但我遇到了错误。TypeError:无法读... 查看详情

如何使用 karma/jasmine 在 angularAMD 中模拟服务?

】如何使用karma/jasmine在angularAMD中模拟服务?【英文标题】:HowtomockserviceinangularAMDwithkarma/jasmine?【发布时间】:2014-12-1223:44:13【问题描述】:我有一个使用AngularAMD/RequireJS/Karma/Jasmine的项目,我的基本配置一切正常,大多数单元... 查看详情

使用 Jasmine 和 Karma 进行角度单元测试时出错

】使用Jasmine和Karma进行角度单元测试时出错【英文标题】:ErrorwhileangularunittestingwithJasmineandKarma【发布时间】:2020-05-3008:58:51【问题描述】:我已经在我的spec.ts中导入了角度材料,但是在尝试运行该特定组件的ng测试时出现以下... 查看详情

使用 karma-coverage 和 angularjs 对每个源文件进行代码覆盖

】使用karma-coverage和angularjs对每个源文件进行代码覆盖【英文标题】:codecoverageforeachsourcefileusingkarma-coverageandangularjs【发布时间】:2016-01-2906:42:06【问题描述】:我正在尝试为Angular项目的单元测试设置代码覆盖率。但是它给了我... 查看详情

使用 jasmine / karma 进行 Angular 4 单元测试和 http post mocking - 如何修复

】使用jasmine/karma进行Angular4单元测试和httppostmocking-如何修复【英文标题】:Angular4unittestingwithjasmine/karmawithhttppostmocking-howtofix【发布时间】:2018-03-0708:01:12【问题描述】:我有一项服务,我想在Angular4typescriptjasmine中进行单元测试... 查看详情

Protractor 和 Karma 可以一起使用吗?

】Protractor和Karma可以一起使用吗?【英文标题】:CanProtractorandKarmabeusedtogether?【发布时间】:2013-06-0820:41:10【问题描述】:如果Protractor正在取代AngularScenarioRunner进行E2E测试,这是否意味着我仍然可以将它与Karma一起用作我的E2E测... 查看详情

设置jenkins使用karma和eslint进行单元测试和lint检查

Jenkins被用作持续集成服务器。本文主要介绍一下如何配置我们的Jenkins项目构建,以在GitHub上托管的项目上运行单元测试和lint检查。然后Jenkins负责运行在构建中指定的所有测试。如果build失败,它会通知所有开发人员,以便他们... 查看详情

Ruby on Rails 5.1 和 Vue.js 2.4.x – 使用 Karma、Jasmine 进行测试 – 如何安装?

】RubyonRails5.1和Vue.js2.4.x–使用Karma、Jasmine进行测试–如何安装?【英文标题】:RubyonRails5.1&Vue.js2.4.x–TestingwithKarma,Jasmine– Howtoinstall?【发布时间】:2018-02-2123:35:28【问题描述】:我有Rails5.1.x和Vue.js2.4.x;我不会在前端混合... 查看详情

使用 Sinon、redux 和 Karma 测试 axios 调用

】使用Sinon、redux和Karma测试axios调用【英文标题】:TestingaxioscallswithSinon,withreduxandKarma【发布时间】:2016-06-1319:39:06【问题描述】:你好在redux文档中进行测试,他们有这个例子来测试api调用:importconfigureMockStorefrom\'redux-mock-store\'... 查看详情

使用jasmine和karma对传统js进行单元测试(代码片段)

当你拿到十五年前的一堆javascript的代码,你如何对这堆javascript代码写单元测试呢?于是就有了这篇文章。注意:不需要装任何现代化js框架,包括angular,react,vue之类的,都不需要装!!!先要... 查看详情

如何通过 Angular、Karma 和 Webpack 的单独文件拆分代码覆盖率?

...单独的文件拆分覆盖范围?现在,捆绑文件一切正常。我使用Angular、Webpack进行捆绑,使用Karma/Mocha/Chai进行测试。我有以下 查看详情

使用 Karma 进行角度测试

】使用Karma进行角度测试【英文标题】:AngularTestingusingKarma-【发布时间】:2019-05-0118:34:06【问题描述】:我正在测试一个Angular组件并且我的组件依赖于一个服务,所以我的组件的构造函数在逻辑上注入了服务。在ngOnInit,服务在... 查看详情

在我的 JSPM 包上使用 JSPM 404 进行 Karma/Jasmine 单元测试

】在我的JSPM包上使用JSPM404进行Karma/Jasmine单元测试【英文标题】:Karma/JasmineunittestwithJSPM404onmyJSPMpackages【发布时间】:2016-08-0800:49:42【问题描述】:我试图让JSPM/Karma/Babel/Jasmine一起工作。但是运行karmastart时出现错误1504201617:34:02.... 查看详情

FirebaseError:使用无效数据调用函数 Query.where()。不支持的字段值:在进行 Karma 测试时未定义

】FirebaseError:使用无效数据调用函数Query.where()。不支持的字段值:在进行Karma测试时未定义【英文标题】:FirebaseError:FunctionQuery.where()calledwithinvaliddata.Unsupportedfieldvalue:undefinedwhiledoingKarmatesting【发布时间】:2021-12-1610:10:26【问题... 查看详情

在vue-cli生成的项目中使用karma+chrome进行单元测试

...单元测试,那么会采用karma+mocha作为单元测试框架,默认使用的浏览器是PhantomJs。Karma是一个基于Node.js的JavaScript测试执行过程管理工具(TestRunner)。可启动所有主流Web浏览器作为测试容器,运行时会启动一个web服务器,生成包... 查看详情