我正面临着获得Karma与SystemJS,Angular2和Typescript一起工作的问题.
这是我的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:
/*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','@angular/compiler': { main: 'index.js','@angular/common': { main: 'index.js','@angular/platform-browser': { main: 'index.js','@angular/platform-browser-dynamic': { main: 'index.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:
(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','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启动karma.conf.js进行测试时,我的测试位于主要的ts文件旁边.
我得到这个错误:
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.
有人可以帮忙吗?
我可以看到你做了什么的几个问题.
首先我认为你配置了两次SystemJS:
>在test-shim-karma.js文件中一次
>一次在karma.conf.js一个通过SystemJS的karma插件.
然后,您不配置将在规范文件中使用的源模块:
packages['base/app'] = { defaultExtension: 'js',format: 'cjs',map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords,{}) };
我还会在您的karma.conf.js文件的文件部分中添加一些条目:
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',{pattern: 'node_modules/zone.js/dist/zone.js',{pattern: 'node_modules/zone.js/dist/async-test.js',{pattern: 'node_modules/systemjs/dist/system-polyfills.js',{pattern: 'node_modules/systemjs/dist/system.src.js',{pattern: 'node_modules/rxjs/**/*.js',included: false,watched: false},{pattern: 'node_modules/@angular/**/*.js',{pattern: 'karma-test-shim.js',// Paths loaded via module imports {pattern: 'app/**/*.js',// Paths to support debugging with source maps in dev tools {pattern: 'app/**/*.ts',{pattern: 'app/**/*.js.map',watched: false} ],
您可以看一下这个项目,使用Angular2 RC1和TypeScript进行Karma的工作配置: