Karma/Require.js 找不到文件答案

【问题标题】：Karma/Require.js cannot find filesKarma/Require.js 找不到文件
【发布时间】：2014-02-12 22:18:25
【问题描述】：

我正在尝试在 Require.js 和 AngularJS 下使用 karma 编写单元测试。我以https://github.com/tnajdek/angular-requirejs-seed 为起点。当我按原样构建项目时，一切正常。

Chrome 32.0.1700 (Windows 7): Executed 3 of 3 SUCCESS (0.317 secs / 0.007 secs)

现在，我想引用与 bower 加载的不同版本的 AngularJS 脚本。（我们有一个无法更改的生产目录结构。）我在 /scripts/angular-test 中有种子项目，我想引用 AngularJS 文件，而不是在 bower 目录中，而是在我们系统中的 /scripts /angular/angular-dev-1.2.8.js.

我认为我需要做的第一件事是修改 karma.conf.js 文件以指向不同的根目录：

module.exports = function(config) {
    config.set({
        basePath: '../..',
        frameworks: ['jasmine', 'requirejs'],
        files: [
            {pattern: 'angular-test/app/js/*.js', included: false},
            {pattern: 'angular-test/app/js/**/*.js', included: false},
            {pattern: 'angular-test/test/unit.js', included: false},
            {pattern: 'angular-test/test/unit/*.js', included: false},
            {pattern: 'angular-test/test/unit/**/*.js', included: false},
            {pattern: 'angular-test/bower_components/**/*.js', included: false},
            // needs to be last http://karma-runner.github.io/0.10/plus/requirejs.html
            'angular-test/test/main-test.js'
        ],
    autoWatch: true,
    LogLevel: config.LOG_DEBUG,
    browsers: ['Chrome'],
    junitReporter: {
        outputFile: 'angular-test/test_out/unit.xml',
        suite: 'unit'
    }
  });
};

我将所有其他 ref 更改为在其路径中包含 angular-test，例如在 main-test.js 文件中：

require.config({
    paths: {
        angular: '/base/angular-test/bower_components/angular/angular',
        angularRoute: '/base/angular-test/bower_components/angular-route/angular-route',
        angularMocks: '/base/angular-test/bower_components/angular-mocks/angular-mocks',
        text: '/base/angular-test/bower_components/requirejs-text/text',
        fixtures: '/base/angular-test/test/unit/fixtures'

    },
    baseUrl: '/base/angular-test/app/js',
...

一切仍然有效。请注意，此时，我仍在使用 angular-requirejs-seed 中的所有相同文件。但是，浏览器中的 URL 确实发生了变化；而不是

http://localhost:9876/base/bower_components/angular/angular.js

现在对 angular.js 的引用

http://localhost:9876/base/angular-test/bower_components/angular/angular.js

到目前为止一切顺利。现在，我想更改对 angular.js 的引用。所以我在 main-test.js 中把它改成

        angular: '/base/angular/angular-dev-1.2.8',

现在，它不再能找到 angular - 具体来说，浏览器试图点击

http://localhost:9876/base/angular/angular-dev-1.2.8.js

正如人们所期望的那样，但它得到一个 404 导致业力错误

ERROR: 'There is no timestamp for /base/angular/angular-dev-1.2.8.js!'
Chrome 32.0.1700 (Windows 7): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Chrome 32.0.1700 (Windows 7) ERROR
    Uncaught Error: Script error for: angular
    http://requirejs.org/docs/errors.html#scripterror
    at d:/Gary/AppData/Roaming/npm/node_modules/requirejs/require.js:141
Chrome 32.0.1700 (Windows 7): Executed 0 of 0 ERROR (0.254 secs / 0 secs)

鉴于对“/base/angular-test/bower_components/angular/angular.js”的修改引用有效，我希望这也有效，但事实并非如此。我唯一能想到的是，由于某种原因，业力网络服务器限制了对 /base/angular-test 子树的访问，尽管我无法想象为什么会这样。

【问题讨论】：

标签： angularjs unit-testing requirejs karma-runner

【解决方案1】：

在您的 karma.conf.js 文件中尝试{pattern: 'angular-test/bower_components/**/*.js', included: false},，然后在 main-test.js 文件中提及：

shim: {

    'angular' : {'exports' : 'angular'},
    'angularMocks': {
        deps:['angular'],
        'exports':'angular.mock'
    },
    '<your App name>': {
        deps: ['angular'],
        'exports': '<your App name>'

}

我认为当 requirejs 无法插入 Angular 时，您会遇到错误。当 Chrome 打开时，点击调试按钮，然后在调试器上，检查元素并检查是否所有必要的文件都加载到 <body> 和 <head> 中。希望这可以帮助。干杯。

【讨论】：

【解决方案2】：

到目前为止一切顺利。现在，我想更改对 angular.js 的引用。所以我在 main-test.js 中把它改成

angular: '/base/angular/angular-dev-1.2.8',

现在，它不再能找到 angular - 具体来说，浏览器试图点击

本地主机：9876/base/angular/angular-dev-1.2.8.js

正如人们所期望的那样，但它得到一个 404 导致业力错误

在您更改了 main-test.js 中的引用并开始失败后，您是否返回到您的 karma 配置文件并确保包含新文件？我总是忘记这样做，所以我总是以那些 404 结束。

【讨论】：