“错误:不匹配的匿名 define(）” 与 Karma + RequireJS + Jasmine

"Error: Mismatched anonymous define()" with Karma + RequireJS + Jasmine

本文关键字：Karma RequireJS Jasmine define 错误 不匹配      更新时间：2023-09-26

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

我有一个加载了 RequireJS 和 r.js 的 AngularJS 前端，针对生产进行了优化，所以这一切都在一个文件中。这行得通！

不起作用的是执行单元测试。到目前为止，这没什么好看的，只是从教程中复制了一个入门。

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的配置回调执行了两次。(这是对某事的暗示吗？

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

我现在让它运行，所以将我的解决方案留在这里：

我想我现在更好地理解了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测试要捕获的问题(。

希望它能帮助到我的情况中的其他人！

确切地说，如果您转到requirejs站点，此错误表明如果您在html中包含任何脚本标记，这意味着karma提供的html

所以在 karma.conf 中.js当你包含这样的文件时：files['/base/src/scripts/xyz.js'] 在我看来，它是作为脚本标签添加的，你继续得到错误：不匹配的匿名 define(( 模块

尝试模式示例：{模式："/base/src/scripts/xyz.js"，包含：false}，它阻止在脚本标记中添加 JS

相关文章：