Getting “Mismatched anonymous define() module…” when I try running tests

问题

I am trying to configure my karma jasmine unit testing with requirejs. But each time i run it, i am getting the below error:

Chrome 34.0.1847 (Mac OS X 10.9.2) ERROR
Uncaught Error: Mismatched anonymous define() module: function (angular){

 describe(\'Unit: Testing RequireJS\', function(){
  var ctrl;
  var scope;
  var rootScope;

  beforeEach(angular.mock.module(\'wsaApp\'));

  beforeEach(angular.mock...<omitted>...ch

Below are differenr file: spec file:

define([\'angular\'], function(angular){

describe(\'Unit: Testing RequireJS\', function(){
   var ctrl;
   var scope;
   var rootScope;

beforeEach(angular.mock.module(\'wsaApp\'));

beforeEach(angular.mock.inject(function($rootScope){
    scope = $rootScope.$new();
    rootScope = $rootScope;
}));

});
});

main.js

require.config({

paths: {
    /* ABC order */
    \'angular\': \'vendor/angular/1.2.0/angular.min\'
},
shim: {
    \'angular\': { exports: \'angular\' },

    \'app/controllers\': { deps: [\'angular\'] }
}
});

test-main.js

// This creates an array of all the files that Karma finds with a suffix of
// Test.js (eg utilsTest.js) to be added to the Require JS config below
var tests = [],
file;
for (file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
    if(/spec\\.js$/.test(file)) {
        tests.push(file);
    }
}
}
requirejs.config({
baseUrl: \'/base/public/javascripts/\',  // Karma serves files from /base/<your-base-path>
    paths: {
        /* ABC order */
        \'angular\': \'vendor/angular/1.2.1/angular.min\'

    },
    shim: {
        \'angular\': { exports: \'angular\' },
        \'app/controllers\': { deps: [\'angular\'] },           
         },
deps: tests,  // add tests array to load our tests

callback: window.__karma__.start  // start tests once Require.js is done
});

karma.conf.js

//Karma configuration
module.exports = function (config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: \'\',

// Fix for \"JASMINE is not supported anymore\" warning
frameworks: [\"jasmine\", \"requirejs\"],

// list of files / patterns to load in the browser
files: [
    \'vendor/angular/1.2.1/angular.js\',
    \'jquery-1.7.1.min.js\',
    \'test/spec/**/*.js\',
    \'test/test-main.js\'
],

preprocessors: {
    \'app/**/*.js\': \'coverage\'
},

// list of files to exclude
exclude: [\'app/main.js\'],

// test results reporter to use
// possible values: dots || progress || growl
reporters: [\'progress\', \'coverage\'],

coverageReporter : {
    type: \'html\',
    dir: \'coverage/\'
},


// web server port
port: 9876,

// cli runner port
runnerPort: 9100,

// enable / disable colors in the output (reporters and logs)
colors: true,

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [\'Chrome\'],

browserNoActivityTimeout: 100000,
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 20000,

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
  });
 }

i have tried different options mentioned in other threads, but nothing seems to work.

回答1:

Finally i solved all the issues and was able to run the jasmine test successfully with requirejs configuration. I had top mention all the dependencies in the karma config and mark them as included: false exclusively so that they get loaded by requirejs through my test-config file.

files: [
    {pattern: 'vendor/angular/1.2.1/angular.js', included: false},
    {pattern: 'vendor/angular/1.2.1/angular-mocks.js', included: false},
    {pattern: 'vendor/angular/1.2.1/angular-*.js', included: false},
    {pattern: 'vendor/bootstrap/bootstrap-*.js', included: false},
    {pattern: 'jquery-1.7.1.min.js', included: false},
    {pattern: 'app/app.js', included: false},
    {pattern: 'app/**/*.js', included: false},
    {pattern: 'test/test-config.js', included: true}]

only the test-config is loaded through karma and all others to be included in the karma config but mark as false.

Also, i had to load the app.js in my spec file so that the modules and controllers get loaded:

define(['angular-mocks', 'jquery', 'app/app'], function(angularmocks, $, app){
describe.....
}

回答2:

Since you're loading the specific .js files you need in your test-main.js with the paths: { } parameter, you don't have to explicitly list them in karma.config.js. Instead, you can just use your line { pattern: 'app/**/*.js', included: false }. All the lines before that are redundant. Just make sure you have the included: false modifier, otherwise Karma will load them in-line, and you'll get the Uncaught Error: Mismatched anonymous define() problem

来源：https://stackoverflow.com/questions/23689671/getting-mismatched-anonymous-define-module-when-i-try-running-tests

标签

angularjs

requirejs

karma-runner

karma-jasmine