アプリ コードが moment.js ライブラリに依存する ng2-boostrap モジュールを使用している場合、Karma でジャスミン テストを実行できません。
アプリはブラウザーで正常に動作し、ジャスミン テストは、システムに瞬間的なマッピングを追加することでブラウザーで実行できます。
-- 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},
....
そして、karma-test-shim で:
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エラーパスで後で取得しています。
完全なファイルは、 https ://github.com/tzielins/angular-start-project の簡単なテスト プロジェクトにあります 。
カルマ構成はhttp://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/に基づいています
私はより単純な構成を使用して喜んでいますが、System.js/Karma の経験をゼロから始めることができて幸運でした。これは ng2-boostrap 依存関係なしで動作します (テスト中のコードはカルマをトリップするのに十分なフォーム ng2-boostrap のみをインポートします。テストに合格するためにコメントアウトすることができます）。
System.js 構成から明らかな何かが欠けているに違いありません。