Karma + angular-mocks TypeError: 'undefined' is not an object (evalating 'angular.mock = {}')答案

【问题标题】：Karma + angular-mocks TypeError: 'undefined' is not an object (evaluating 'angular.mock = {}')Karma + angular-mocks TypeError: 'undefined' is not an object (evalating 'angular.mock = {}')
【发布时间】：2015-03-05 14:24:47
【问题描述】：

我正在尝试使用 Karma + Jasmine 编写单元测试，但遇到 angular-mocks 错误。运行 grunt test 时出现以下错误：

PhantomJS 1.9.8 (Mac OS X) 错误 TypeError：“未定义”不是对象（评估“angular.mock = {}”）在 /Users/danielbogart/Documents/coding/work/AexNav/bower_components/angular-mocks/angular->mocks.js:17 Chrome 39.0.2171 (Mac OS X 10.9.4) 错误未捕获的类型错误：无法设置未定义的属性“模拟” 在 /Users/danielbogart/Documents/coding/work/AexNav/bower_components/angular-mocks/angular->mocks.js:17

Gruntfile 业力配置：

    karma: {
        options: {
            frameworks: ['jasmine'],
            files: [ 
                'dom_munger.data.appjs',
                'tests/spec/*.js',
                'bower_components/angular-mocks/angular-mocks.js'
            ],
            logLevel: 'ERROR',
            reporters: ['mocha'],
            autoWatch: false, //watching is handled by grunt-contrib-watch
            singleRun: true
        },
        all_tests: {
            browsers: ['PhantomJS', 'Chrome']
        },
        during_watch: {
            browsers: ['PhantomJS']
        }
    }

谢谢！

【问题讨论】：

您还需要包含 angular.js，然后只有 angular.mocks 可以工作，否则 window.angular 将是未定义的。

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

【解决方案1】：

您还需要包含 angular.js，然后只有 angular.mocks 可以工作，否则 window.angular 将是未定义的。

 files: [ 
            'dom_munger.data.appjs',
            'path/to/angular.js', //<-- include angularjs
            'bower_components/angular-mocks/angular-mocks.js',
            'tests/spec/*.js'
        ],

【讨论】：

我也偶然发现了这个。如果您使用的是 browserify，请确保在需要 angular-mocks 之前需要您的包。
对我来说，这是业力配置文件中“文件”中缺少的参考文件。

【解决方案2】：

2017 年和 webpack 2 的更新（但角度相同

就像@jlew 说的，angular-mocks 期望窗口有角度
模块引用正在被 webpack 替换

所以在测试中你需要一个像这样的标题：

import angular from 'angular';
import 'angular-mocks/ngMock';

并将每个全局 module 引用替换为 angular.mock.module

【讨论】：

在我的设置中几乎在这里工作，对我来说，webpack 说模块“angular”没有默认导出。我使用类似解决了：import * as angular from "angular";import "angular-mocks/ngMock";

【解决方案3】：

angular-mocks.js 假定 angular.js 也已包含在内。

【讨论】：

我猜 jlew 的意思是在 angular-mocks.js 被包含之前需要包含 angular.js：files: [ 'bower_components/angular/angular.js', 'bower_components/ angular-mocks/angular-mocks.js',

【解决方案4】：

我在以下语句中遇到了这个错误：

angular.mock.module( 'ui.router' )

这是由库声明中的错误顺序引起的：

karma.config.js：

...
files: ['./node_modules/angular-mocks/angular-mocks.js']
   .concat(dependencies),
...

（dependencies 是我的库列表并包含angular.js）

我只是将'./node_modules/angular-mocks/angular-mocks.js' 移动到依赖项列表中，但是之后 angular.js ：

像这样：

...
'./node_modules/angular/angular.js',
'./node_modules/angular-mocks/angular-mocks.js'
...

走得更远：

如果您查看angular-mocks.js，您会发现它需要angular.js 才能工作！

/**
 * @license AngularJS v1.7.5
 * (c) 2010-2018 Google, Inc. http://angularjs.org
 * License: MIT
 */
(function(window, angular) {

'use strict';

/* global routeToRegExp: true */
...

【讨论】：