Karma：（SystemJS）XHR错误（404 Not Found）加载src / node_modules / angular2-jwt / angular2-jwt.js

我从https://github.com/angular/quickstart使用angular2-seed。 我想为我的一个类运行unit testing。 以下是我的testing：

describe('my method', () => { it('should expect true', () => { mockContextSettings = jasmine.createSpyObj('mockContextSettings', ['environment']); mockWindow = jasmine.createSpyObj('mockWindow', ['location']); workContext = new WorkContext(mockContextSettings, mockWindow); expect(true).toBe(true); }); }); 

testing将正确运行没有

 workContext = new WorkContext(mockContextSettings, mockWindow); 

但是，当我在我的testing中，我得到了在业绩浏览器控制台中的以下错误：

 GET http://localhost:9876/base/src/node_modules/angular2-jwt/angular2-jwt.js 404 (Not Found) 

下面是我的systemjs.config，karma.config.js，karma-test-shim.js：

systemjs.config

 /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ defaultJSExtensions: true, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js', 'moment': 'npm:moment/min/moment.min.js', 'moment-timezone': 'npm:moment-timezone/builds/moment-timezone-with-data-2010-2020.min.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this); 

karma.config.js

 module.exports = function(config) { var appBase = 'src/'; // transpiled app JS and map files var appSrcBase = appBase; // app source TS files // Testing helpers (optional) are conventionally in a folder called `testing` var testingBase = 'testing/'; // transpiled test JS and map files var testingSrcBase = 'testing/'; // test source TS files config.set({ basePath: '.', frameworks: ['jasmine'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter') ], client: { builtPaths: [appBase, testingBase], // add more spec base paths as needed clearContext: false // leave Jasmine Spec Runner output visible in browser }, customLaunchers: { // From the CLI. Not used here but interesting // chrome setup for travis CI using chromium Chrome_travis_ci: { base: 'Chrome', flags: ['--no-sandbox'] } }, files: [ // System.js for module loading 'node_modules/systemjs/dist/system.src.js', // Polyfills 'node_modules/core-js/client/shim.js', // zone.js 'node_modules/zone.js/dist/zone.js', 'node_modules/zone.js/dist/long-stack-trace-zone.js', 'node_modules/zone.js/dist/proxy.js', 'node_modules/zone.js/dist/sync-test.js', 'node_modules/zone.js/dist/jasmine-patch.js', 'node_modules/zone.js/dist/async-test.js', 'node_modules/zone.js/dist/fake-async-test.js', 'node_modules/angular2-jwt/angular2-jwt.js', // <-- added explicitly to see if it fixes the issue // RxJs { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, // Paths loaded via module imports: // Angular itself { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, 'karma-test-shim.js', // optionally extend SystemJS mapping eg, with barrels // transpiled application & spec code paths loaded via module imports { pattern: appBase + '**/*.js', included: false, watched: true }, { pattern: testingBase + '**/*.js', included: false, watched: true }, // Asset (HTML & CSS) paths loaded via Angular's component compiler // (these paths need to be rewritten, see proxies section) { pattern: appBase + '**/*.html', included: false, watched: true }, { pattern: appBase + '**/*.css', included: false, watched: true }, // Paths for debugging with source maps in dev tools { pattern: appBase + '**/*.ts', included: false, watched: false }, { pattern: appBase + '**/*.js.map', included: false, watched: false }, { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, { pattern: testingBase + '**/*.js.map', included: false, watched: false} ], // Proxied base paths for loading assets proxies: { // required for modules fetched by SystemJS '/base/src/node_modules/': '/base/node_modules/' }, exclude: [], preprocessors: {}, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }) } 

卡玛-testingshim.js

 // /*global jasmine, __karma__, window*/ Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. // Uncomment to get full stacktrace output. Sometimes helpful, usually not. // Error.stackTraceLimit = Infinity; // jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; // builtPaths: root paths for output ("built") files // get from karma.config.js, then prefix with '/base/' (default is 'src/') var builtPaths = (__karma__.config.builtPaths || ['src/']) .map(function(p) { return '/base/'+p;}); __karma__.loaded = function () { }; function isJsFile(path) { return path.slice(-3) == '.js'; } function isSpecFile(path) { return /\.spec\.(.*\.)?js$/.test(path); } // Is a "built" file if is JavaScript file in one of the "built" folders function isBuiltFile(path) { return isJsFile(path) && builtPaths.reduce(function(keep, bp) { return keep || (path.substr(0, bp.length) === bp); }, false); } var allSpecFiles = Object.keys(window.__karma__.files) .filter(isSpecFile) .filter(isBuiltFile); System.config({ // Base URL for System.js calls. 'base/' is where Karma serves files from. baseURL: 'base/src', // Extend usual application package list with test folder packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, // Assume npm: is set in `paths` in systemjs.config // Map the angular testing umd bundles map: { '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', 'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js', // <-- added explicitly to see if it fixes the issue }, }); System.import('systemjs.config.js') .then(importSystemJsExtras) .then(initTestBed) .then(initTesting); /** Optional SystemJS configuration extras. Keep going w/o it */ function importSystemJsExtras(){ return System.import('systemjs.config.extras.js') .catch(function(reason) { console.log( 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' ); console.log(reason); }); } function initTestBed(){ return Promise.all([ System.import('@angular/core/testing'), System.import('@angular/platform-browser-dynamic/testing') ]) .then(function (providers) { var coreTesting = providers[0]; var browserTesting = providers[1]; coreTesting.TestBed.initTestEnvironment( browserTesting.BrowserDynamicTestingModule, browserTesting.platformBrowserDynamicTesting()); }) } // Import all spec files and start karma function initTesting () { return Promise.all( allSpecFiles.map(function (moduleName) { return System.import(moduleName); }) ) .then(__karma__.start, __karma__.error); } 

我有我的packages.json依赖项中的angular2-jwt，并已经安装它。 我真的不知道问题是什么。

更新：

再次运行testing，没有任何理由，这次加载了angular2-jwt.js！ 但还有一个问题：这个文件有一行：require（'…'），所以我在这次在业力浏览器控制台中得到以下错误：

  Uncaught ReferenceError: require is not defined at node_modules/angular2-jwt/angular2-jwt.js:19 

Answer 1

尝试改变…

 'node_modules/angular2-jwt/angular2-jwt.js' 

… 至 …

 { pattern: 'node_modules/angular2-jwt/angular2-jwt.js', included: false, watched: false } 

…在你的karma.config.js文件中。

第一行代码告诉Karma使用文件的默认值，如下所示

 { pattern: "your/file/path", included: true, watched: false } 

包括该文件告诉Karma使用脚本标记加载文件，如果使用systemjs加载应用程序，这不是你想要的。

我今天刚刚阅读了这些棘手的configuration设置。 如果您有兴趣，我已经粘贴了以下文章的链接。 我发现这很有帮助。

https://psamsotha.github.io/angular/2016/12/16/angular2-testing-karma-systemjs.html

Answer 2

修改karma.config.js中的appBase为

  var appBase = '.'; /////////////////////////////////