使Karma与SystemJS，Angular2和Typescript协同工作的问题 [英] Issues getting Karma to work with SystemJS, Angular2 and Typescript
本文介绍了使Karma与SystemJS，Angular2和Typescript协同工作的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正面临使Karma与SystemJS，Angular2和Typescript一起使用的问题.
I am facing issues getting Karma to work with SystemJS, Angular2 and Typescript.
这是我的karma.conf.js:
Here is my karma.conf.js:
'use strict';
module.exports = function (config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '.',
// frameworks to use
frameworks: ['systemjs', 'jasmine'],
plugins: ['karma-systemjs', 'karma-jasmine', 'karma-phantomjs-launcher'],
files: [
'node_modules/reflect-metadata/Reflect.js',
'app/**/*.spec.ts',
//'jspm_packages/system-polyfills.js',
'karma-test-shim.js'
],
systemjs: {
configFile: "systemjs.config.js",
config: {
//baseURL: ".",
transpiler: "typescript",
paths: {
"systemjs": "jspm_packages/system.js",
"system-polyfills": "jspm_packages/system-polyfills.js",
"typescript": "node_modules/typescript/lib/typescript.js"
},
packages: {
'app': {
defaultExtension: 'ts'
}
}
},
includeFiles: [
'node_modules/reflect-metadata/Reflect.js'
],
serveFiles: [
'app/**/*.ts',
'main-bundle.js'
]
},
// proxied base paths
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": "/base/app/",
"/jspm_packages/": "/base/jspm_packages/",
"/node_modules/": "/base/node_modules/"
},
// list of files to exclude
exclude: [],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// 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: ['PhantomJS'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
});
};
我的karma-test-shim.js:
My karma-test-shim.js:
/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
__karma__.loaded = function () {
};
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return path.slice(-8) == '.spec.js';
}
function isBuiltFile(path) {
var builtPath = '/base/app/';
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);
// Load our SystemJS configuration.
System.config({
baseURL: '/base'
});
System.config(
{
map: {
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular',
'app': 'app'
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'@angular/core': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
}
});
Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
var testing = providers[0];
var testingBrowser = providers[1];
testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
}).then(function() {
// Finally, load all spec files.
// This will run the tests directly.
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
}));
}).then(__karma__.start, __karma__.error);
我的systemjs.config.js:
My systemjs.config.js:
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'crypto': '@empty'// this fixed my last issue
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {main: 'main.js', defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'},
'angular2-in-memory-web-api': {defaultExtension: 'js'}
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);
当我使用karma start karma.conf.js运行测试时，并且测试位于主ts文件旁边.
When I run my tests with karma start karma.conf.js and my tests are located alongside the main ts files.
我收到此错误:
11 05 2016 17:02:24.306:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/typescript/lib/typescript.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: eval code
eval@[native code]
F@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:12217
H@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:11846
when@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:15520
run@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:14559
_drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:3250
drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:1667
Evaluating /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
Error loading /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
11 05 2016 17:02:24.316:DEBUG [karma]: Run complete, exiting.
11 05 2016 17:02:24.316:DEBUG [launcher]: Disconnecting all browsers
11 05 2016 17:02:24.324:DEBUG [launcher]: Process PhantomJS exited with code 0
11 05 2016 17:02:24.324:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-62098834
11 05 2016 17:02:24.329:DEBUG [launcher]: Finished all browsers
npm ERR! Test failed. See above for more details.
任何人都可以帮忙吗?
推荐答案
我可以看到您所做的一些问题.
I can see several problem in what you did.
首先，我认为您配置了两次SystemJS:
First I think that you configure twice SystemJS:
- 一次进入
test-shim-karma.js文件 - 从
karma.conf.js到SystemJS karma插件一次.
- once in the
test-shim-karma.jsfile - once in the
karma.conf.jsone throught the SystemJS karma plugin.
然后，您无需配置将在规范文件中使用的源模块:
Then you don't configure your source modules that will be used within your spec files:
packages['base/app'] = {
defaultExtension: 'js',
format: 'cjs',
map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
};
您多次调用System.config方法.
我还将在karma.conf.js文件的files部分中添加一些条目:
I would also add some entries in the files section of your karma.conf.js file:
files: [
// Paths loaded by Karma
{pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true},
{pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true},
{pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},
{pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: true},
{pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
{pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
{pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'karma-test-shim.js', included: true, watched: true},
// Paths loaded via module imports
{pattern: 'app/**/*.js', included: false, watched: true},
// Paths to support debugging with source maps in dev tools
{pattern: 'app/**/*.ts', included: false, watched: true},
{pattern: 'app/**/*.js.map', included: false, watched: false}
],
您可以查看此项目，了解使用Angular2 RC1和TypeScript进行Karma的工作配置:
You could have a look at this project for a working configuration of Karma with Angular2 RC1 and TypeScript:
这篇关于使Karma与SystemJS，Angular2和Typescript协同工作的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
