如何在Karma中配置System.js以测试依赖于moment.js的代码

时间:2016-03-15 15:32:13

标签: javascript karma-runner momentjs systemjs ng2-bootstrap

如果我的应用程序代码使用ng2-boostrap模块,我无法在Karma中运行茉莉花测试,这取决于moment.js库。

该应用程序在浏览器中运行良好,并且可以通过向系统添加映射来在浏览器中运行茉莉花测试:

-- unit-test.html ---
...
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
...
<body>
<script>
    // #2. Configure SystemJS to use the .js extension
    //     for imports from the app folder
    System.config({
        packages: {
            'app': {defaultExtension: 'js'}
        },
        map: {
            'moment': 'node_modules/moment/moment.js'
        }
    });

我在karma.shim内部尝试了相同的但是它没有用。我得到了:

 Error: XHR error (404 Not Found) loading http://localhost:9876/node_modules/moment/moment.js
 Error loading http://localhost:9876/node_modules/moment/moment.js as "moment" from http://localhost:9876/ng2-bootstrap/components/datepicker/date-formatter
 at addToError (D:/Projects/Angular/karma-ngbootstrap/node_modules/systemjs/dist/system.src.js:41:18)   

在我的karma.conf中我有

files: [
    ...
    {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},    
    ....
    {pattern: 'node_modules/moment/moment.js',included: true, watched: true},
    {pattern: 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js', included: true, watched: true},

    {pattern: 'karma-test-shim.js', included: true, watched: true},

    {pattern: 'app/**/*.js', included: false, watched: true},
    ....

在业力测试垫片中:

System.config({
    packages: {
        'base/app': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files).
            filter(onlyAppFiles).
            reduce(function createPathRecords(pathsMapping, appPath) {
                // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
                // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
                var moduleName = appPath.replace(/^\/base\/app\//, './').replace(/\.js$/, '');
                pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                return pathsMapping;
            }, {})
        }
    },
    map: {
        'moment': 'node_modules/moment/moment.js'
    }
});

映射部分的工作类型,导致我放在moment下面的内容我稍后会在XHR错误路径中得到它。

完整的文件可以在简单的测试项目中找到: enter image description here

业力配置基于https://github.com/tzielins/angular-start-project

我很高兴使用更简单的配置,但我运气经验与System.js / Karma从头开始,这个工作没有ng2-boostrap依赖(测试中的代码只导入形式ng2-boostrap,这足够旅行业力,可以注释掉测试通过)。

我必须遗漏System.js配置中显而易见的东西。

1 个答案:

答案 0 :(得分:0)

我正在使用新的“ng2-bootstrap” - “ngx-bootstrap” 与angular-seed并遇到同样的问题。

解决了问题 - 将以下代码添加到文件部分下的“karma.conf.js”中:

{pattern: 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js', included: false, watched: false}