Karma + Jasmine + Durandal + KnockoutJS + RequireJS 单元测试中不匹配的匿名 define() 模块

Posted 2023-03-27

【中文标题】Karma + Jasmine + Durandal + KnockoutJS + RequireJS 单元测试中不匹配的匿名 define() 模块

【英文标题】：Mismatched anonymous define() module in unit testing with Karma + Jasmine + Durandal + KnockoutJS + RequireJS

【发布时间】：2020-05-09 19:30:02

【问题描述】：

通过 Karma 为 Asp.Net MVC 项目使用 Durandal 包装器在 KnockoutJS + RequireJS 上实现 Jasmine 单元测试时出现问题。下面是示例代码：

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);
        );
    );
);

测试 JS 视图模型

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

如果需要将视图模型的 html 文件包含到 karma.conf.js 中的 test-main 或路径中？在发布问题时，错误消息是 - Uncaught Error: Mismatched anonymous define() module: function Uncaught Error: Mismatched anonymous define() module: function

可能是什么原因导致或配置文件中缺少某些内容？

【参考方案1】：

检查用 karma.conf.js 编写的文件路由解决了错误。路由应该相对地取自 karma.conf.js 存储的目录。查看目录示例：

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

所以 karma.conf.js 中的正确路由应该是这样的：

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