Mismatched anonymous define() module in unit testing with Karma + Jasmine + Durandal + KnockoutJS + RequireJS

Question

There is a problem when implementing Jasmine unit tests through Karma for Asp.Net MVC project with Durandal wrapper over KnockoutJS + RequireJS. Here is the sample code:

karma.conf.js

    config.set({
        basePath: '',
        files: [            
            { pattern: '../scripts/jasmine/boot.js', included: false },
            { pattern: '../scripts/knockout-3.4.0.js', included: false },
            { pattern: '../scripts/jquery-1.9.1.js', included: false },
            { pattern: 'node_modules/**/*-min.js', included: false },
            { pattern: '../app/durandal/app.js', included:false},
            'TestScripts/test-main.js',
            'TestScripts/DefaultTestSpec.js',
        ],
        frameworks: ['jasmine', 'requirejs'],
        plugins: [
            require('amd-loader'),
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-requirejs')
        ],
        client: {
            clearContext: false 
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: true
    });
};

test-main.js

var TEST_REGEXP = /(spec|test)\.js$/i;
var BASE_URL = '/base/build/js';
var BASE_URL_REGEXP = /^\/base\/build\/js\/|\.js$/g;

for (var file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (/Spec\.js$/.test(file)) {
            tests.push(file);
        }
    }
}
require.config({
    baseUrl: '/TestScripts',
    paths: {
        'env': 'env',
        'jquery': '../../scripts',
        'underscore': '../../node_modules/underscore/',
        'knockout': '../../scripts/',
        'require': '../../app/durandal/amd/require',
        'app':'../../app/durandal/app.js',
        },

    shim: {
        'underscore': {
            exports: '_'
        }
    },
    deps: tests,
    callback: window.__karma__.start
});

DefaultTestSpec.js

define(['ViewModel'], function (InitVM) {

    describe("MyTestSpecTest", function () {
        it("should be able to connect to View Model file", function () {
            expect(vm.id()).toBe(1);
        });
    });
});

testing JS viewmodel

define(function processView(require) {
function initVM(mode, data, InterfaceName) {
this.id = ko.observable(1);
var vm = this;
        return vm;
})
return InitVM;
})

If there is a need to include the HTML file of the viewmodel to the test-main or path in karma.conf.js? At the time of posting the question error message is - Uncaught Error: Mismatched anonymous define() module: function Uncaught Error: Mismatched anonymous define() module: function

What can be caused or is there something missing in config files?

score 0 · Answer 1 · answered Sep 18 '20 at 12:10

Error was resolved with checking files routes written in karma.conf.js. The routes should be taken relatively from directory where your karma.conf.js stored. See directory example:

$ tree
.
|-- index.html
|-- karma.conf.js
|-- lib
|   |-- jquery.js
|   |-- require.js
|   `-- underscore.js
|-- scripts
|   |-- app.js
|   `-- main.js
`-- test
    |-- appSpec.js
    `-- test-main.js

so proper routes in karma.conf.js should be like:

config.set({
    files: [            
                { pattern: 'scripts/app.js', included: false },
                { pattern: 'scripts/main.js', included: false },
            ]
   });

Mismatched anonymous define() module in unit testing with Karma + Jasmine + Durandal + KnockoutJS + RequireJS

1 Answers1