ReferenceError: 模块未定义 - 使用 Angular/Laravel 应用程序配置 Karma/Jasmine

Question

我有一个现有的 Angular/Laravel 应用程序，其中 Laravel 充当仅提供 JSON 数据的 Angular 前端的 API。加载 Angular 应用程序的页面 index.php 目前由 Laravel 提供服务。从那里，Angular 接管。

我很难开始使用 Karma/Jasmine。使用项目根目录中的karma start 或karma start karma.conf.js 运行测试时，出现以下错误：

ReferenceError: module is not defined

完整输出：

INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/raph/coding/webroot/digitalocean/rugapp/public/rugapp/*.js" does not match any file.
INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket 3OCUMp_xhrGtlGHwiosO with id 7897120
Chrome 39.0.2171 (Mac OS X 10.9.5) hello world encountered a declaration exception FAILED
    ReferenceError: module is not defined
        at Suite.<anonymous> (/Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:3:16)
        at jasmineInterface.describe (/Users/raph/coding/webroot/digitalocean/rugapp/node_modules/karma-jasmine/lib/boot.js:59:18)
        at /Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:1:1
Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 2 of 2 (1 FAILED) (0.005 secs / 0.003 secs)

但是，chrome 浏览器启动时会显示以下内容：

我的karma.conf.js文件如下：

// Karma configuration
// Generated on Mon Dec 22 2014 18:13:09 GMT-0500 (EST)

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

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


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


    // list of files / patterns to load in the browser
    files: [
      '*.html',
      '**/*.js',
      '../../tests/js/test.js',
      '../../tests/js/angular/angular-mocks.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: {
    },


    // 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
  });
};

我的package.json 文件如下所示：

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "karma": "^0.12.28",
    "karma-chrome-launcher": "^0.1.7",
    "karma-jasmine": "^0.3.2",
    "laravel-elixir": "*"
  }
}

test.js

describe("hello world", function() {
    var CreateInvoiceController;
    beforeEach(module("MobileAngularUiExamples"));
    beforeEach(inject(function($controller) {
        CreateInvoiceController = $controller("CreateInvoiceController");
    }));

    describe("CreateInvoiceController", function() {
        it("Should say hello", function() {
            expect(CreateInvoiceController.message).toBe("Hello");
        });
    });
});

describe("true", function() {
    it("Should be true", function() {
        expect(true).toBeTruthy();
    });
});

任何帮助都会非常感谢。

Answer 1

我遇到了类似的消息，结果发现我的angular-mocks 文件路径错误。我使用 npm 安装 angular 和 angular-mocks，并在我的 Karma.conf.js 中错误地指定了它们的路径，如下所示：

files: [
    'node_modules/angular/angular.js',
    'node_modules/angular/angular-mocks.js',
    'scripts/*.js',
    'tests/*.js'
],

我应该这样指定angular-mocks.js 的路径：

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

非常简单的错误，但如果您刚开始使用 AngularJS 单元测试并且不知道在哪里查找，则可能会很耗时。

Answer 2

错误意味着 Angular 无法注入您的模块。大多数情况下，这是因为缺少对脚本文件的引用。在这种情况下，请确保将所有脚本文件定义在 karma 的 [files] 配置下。请特别注意路径，因为如果您的脚本文件夹具有嵌套结构，请确保这样列出。例如：

Scripts/Controllers/One/1.js 
Scripts/Controllers/One/2.js 

可以在 karma.conf.js>文件中列出：

Scripts/Controllers/**/*.js

Answer 3

只需将其留在这里以供将来的搜索者使用。

如果您在没有 Karma 的情况下直接在浏览器中运行角度单元测试（或在 plunkr 或 jsfiddle 等中......）那么可能是

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-cookies.js"></script> 

    <!-- The Mocha Setup goes BETWEEN angular and angular-mocks -->
    <script>
      mocha.setup({
        "ui": "bdd",
        "reporter": "html"
      });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-mocks.js"></script>
    <script src="myApp.js"></script>
    <script src="myTest.js"></script> <!-- test is last -->

Mocha 设置在 angular 和 angular-mocks 之间进行

Answer 4

也许这会对某人有所帮助。

对我来说，解决方案是确保在我的测试之前加载 angular-mocks.js。如果您不确定，您可以在以下部分控制karma.conf.js 中的顺序：

// list of files / patterns to load in the browser
files: [
// include files / patterns here

接下来，要让我的测试真正加载我的 Angular 应用程序，我必须执行以下操作：

describe("hello world", function() {
    var $rootScope;
    var $controller;
    beforeEach(module("YourAppNameHere"));
    beforeEach(inject(function($injector) {

        $rootScope = $injector.get('$rootScope');
        $controller = $injector.get('$controller');
        $scope = $rootScope.$new();

    }));
    beforeEach(inject(function($controller) {
        YourControllerHere = $controller("YourControllerHere");

    }));

    it("Should say hello", function() {
        expect(YourControllerHere.message).toBe("Hello");
    });

});

在你的控制器中，

app.controller('YourControllerHere', function() {

    this.message = "Hello";

});

另外，另一种方式：

describe("YourControllerHere", function() {
    var $scope;
    var controller;

    beforeEach(function() {

        module("YourAppNameHere");

        inject(function(_$rootScope_, $controller) {

            $scope = _$rootScope_.$new();
            controller = $controller("YourControllerHere", {$scope: $scope});

        });

    });

    it("Should say hello", function() {
        expect(controller.message).toBe("Hello");
    });

});

享受测试！