javascript - "Error: Mismatched anonymous define()"与 Karma + RequireJS + Jasmine

Question

我现在卡住了一段时间，试图设置和运行单元测试。

我有一个 AngularJS 前端加载了针对生产优化的 RequireJS 和 r.js，所以它很好地放在一个文件中。这行得通!

执行单元测试是行不通的。到目前为止，这没什么特别的，只是从教程中复制了一个 starter。

tests/user/user.test.js:

define(['angular', 'angular-mocks', 'app'], function(angular, app) {
  describe('Unit: UserController', function() {
    beforeEach(module('user.app'));

    it('should do something', function() {
      console.log('did it');
    });
  });
});

然后我有一个karma.conf.js:

module.exports = function(config) {
  config.set({
    logLevel: config.LOG_DEBUG,
    basePath: './',

    files: [
      // r.js'd app files
      {pattern: 'dist/app.js', included: false},
      // the tests
      {pattern: 'tests/**/*.test.js', included: true},
    ],

    excluded: ['tests/main.test.js']

    frameworks: ['jasmine', 'requirejs'],

    browsers: ['PhantomJS'],

    plugins: [
      'karma-jasmine',
      'karma-junit-reporter',
      'karma-phantomjs-launcher',
      'karma-requirejs'
    ],

  });
};

main.test.js:

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  var returnValue = path.replace(/^\/base\//, '').replace(/\.js$/, '');
  return returnValue;
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

require.config({
  baseUrl: '/base',

  paths: {
    'angular-mocks': 'node_modules/angular-mocks/angular-mocks',
    'app': 'dist/app',
  },

  deps: allTestFiles,

  callback: function() {
    console.log('load complete');
    window.__karma__.start();
  },
});

最后是一个 gulp 任务:

var gulp  = require('gulp');
var karma = require('karma').server;

gulp.task('unit-test', function(done) {
  karma.start({
    configFile: __dirname + '/karma.conf.js',
      singleRun: true
   }, function() { done(); });
}

我在这里和那里添加了一些日志输出，它显示文件已加载。

但是我在 tests/user/user.test.js 中遇到了这个 Error: Mismatched anonymous define() 并且我看不出有什么问题.这是输出: http://pastebin.com/evJPj9B3

如果我将单元测试模块命名为

define('namedtestorso', ['angular', 'angular-mocks', 'app'], function(angular, app) {
  ...

...我不再收到错误，但未执行测试。由于我记得的所有示例都将其用作匿名定义，因此我假设此处的命名不正确。但在那种情况下，执行的日志输出显示来自 main.test.js 的配置回调被执行了两次。 (这是什么暗示吗？)

如果有人知道如何修复它/让它运行，甚至如何继续找出问题所在，那就太好了。提前致谢!

Answer 1

我现在让它运行了，所以我会在这里留下我的解决方案:

我想我现在对 karma 的工作原理有了更好的理解(如果我错了，请告诉我)，所以我找到了我必须做的事情。

这似乎是关于将文件放入 karma.conf.js 以便它们可用于要加载的 main.test.js。否则它们不在“上下文”中，无法访问。但是当放在那里时，请确保将 included 标志设置为 false。

对 karma.conf.js 的更改:

files: [
  ...
  // Also included these dependencies. All the others are minified in the
  // app.js but if you don't do that, also include all project deps like
  // AngularJS etc.
  { pattern: 'node_modules/jasmine-core/lib/jasmine-core/boot.js', included: false },
  { pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false},

  // Then I had an error in my pattern ('tests/**/*.test.js')
  // Only the `main.test.js` is supposed to be included!
  { pattern: 'tests/user/user.test.js', included: false }
  { pattern: 'tests/main.test.js', included: true }
  ...

如果我是正确的，Karma 会创建一个 HTML 文件，并且带有 included: true 的文件将通过脚本标签加载。这就是为什么如果使用 RequireJS，将 include 设置为 false 很重要，因为如果这样做，您将得到 Error: Mismatched anonymous define() .所以这对我来说很有意义。

解决了这个问题后，其他一些没有找到的模块。因为我使用了 RequireJS 优化器，所以我必须将所有模块“映射”到主要的 app.js 文件，这样当测试 JS 文件需要某个模块时，RequireJS 可以确保它是 (或获取)加载。

所以我最终更改了 main.test.js 中的 paths 部分:

paths: {
  // Added these for example
  'angular': '../dist/app',
  'angular-ui-router': '../dist/app',
  // (and also my project modules)
  ...

是的，这似乎有点老套。与此同时，在解决这个问题后，我还更改了我的工作流程，以在开发文件上运行单元测试，并依赖其他工具正常工作(如果没有问题，则由 e2e 测试捕获)。

希望它能帮助其他遇到我情况的人!