参考错误:模块没有定义- - - Karma/Jasmine配置，使用角/Laravel应用。

I have an existing Angular/Laravel app in which Laravel acts as an API to the angular frontend serving only JSON data. The page that loads the angular app, index.php, is currently served by Laravel. From there, Angular takes over.

我有一个现有的角/拉拉维尔应用程序，其中拉拉维尔作为角前端的API，只服务JSON数据。加载角化应用程序的页面，索引。php，目前由Laravel提供。从这里开始，角接管。

I'm have a very difficult time trying to get started with Karma/Jasmine. When running my tests using karma start or karma start karma.conf.js from the root directory of my project, I get the following error:

我很难开始做因果报应/茉莉花。当使用karma start或karma start启动karma.conf运行我的测试时。从我项目的根目录中，我得到以下错误:

ReferenceError: module is not defined

引用错误:模块没有定义

Full output:

完整的输出:

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)

However, the chrome broswer does launch with the following displayed:

不过，chrome broswer的发布显示如下:

My karma.conf.js file is as follows:

我的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
  });
};

My package.json file is shown below:

我的包。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

. 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();
    });
});

Any help would be greatly appreciated.

非常感谢您的帮助。

4 个解决方案

#1

Perhaps this will help someone.

也许这能帮助某些人。

The solution, for me, was to make sure angular-mocks.js was loaded before my tests. If you're not sure, you control the order in karma.conf.js under the following section:

对我来说，解决的办法是确保盎格鲁-莫克人。js在我测试之前就被加载了。如果你不确定，你可以控制karma.conf的订单。js下段:

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

Next, to get my test to actually load my angular app, I had to do the following:

接下来，为了让我的测试加载我的角化应用，我必须做以下事情:

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

});

And in your controller,

在你的控制器,

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

    this.message = "Hello";

});

Also, another way:

同时,另一种方式:

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

});

Enjoy testing!

享受测试!

#2

The error means angular was not able to inject your module. Most of the time this happens because of missing reference to script files. In this case, make sure to have all your script file is defined under [files] configuration of karma. Pay special attention to paths because if your script folder has nested structure, make sure to list as such. For example:

错误的意思是角不能注入你的模块。大多数情况下，这是因为缺少对脚本文件的引用。在这种情况下，请确保在karma的[files]配置下定义所有脚本文件。要特别注意路径，因为如果您的脚本文件夹具有嵌套结构，请确保按此类列出。例如:

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

can be listed as in karma.conf.js>files as :

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

Scripts/Controllers/**/*.js

#3

Just leave this here for future searchers.

把这个留给未来的搜索者。

If you are running angular unit tests in the browser directly without Karma (or in plunkr or jsfiddle ect...) Then it may be that

如果您直接在浏览器中运行角度单元测试而没有因果报应(或者在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 -->

The Mocha Setup goes BETWEEN angular and angular-mocks

摩卡的设置在角和角的模拟之间

#4

I encountered a similar message and turned out I got my angular-mocks file path wrong. I used npm to install angular and angular-mocks, and I specified their path wrongly in my Karma.conf.js like this:

我遇到了类似的消息，结果发现我的angular-mocks文件路径错误。我使用npm安装角和角模拟，我在Karma.conf中错误地指定了它们的路径。js是这样的:

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

I should specify the path of angular-mocks.js as this:

我应该指定angular-mocks的路径。js是这样的:

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

Very simply error, but could be time-consuming to locate if you just started with AngularJS unit testing and didn't know where to look.

非常简单的错误，但是如果您刚刚开始使用AngularJS单元测试，并且不知道在哪里查看，那么定位可能非常耗时。