Karma: (SystemJS) XHR-Fehler (404 nicht gefunden) loading src/Knotenmodule/angular2-jwt/angular2-jwt.js

Question

Ich verwende Angular2-Seed von https://github.com/angular/quickstart. Ich möchte einen Komponententest für eine meiner Klassen durchführen. Unten ist mein Test:

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); 
    }); 
}); 

Der Test korrekt ohne

workContext = new WorkContext(mockContextSettings, mockWindow); 

laufen Aber wenn ich es in meinem Test habe ich die folgende Fehlermeldung in Karma Browser-Konsole:

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

Unten ist meine 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 e.g., 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 
    }) 
} 

Karma-Test-shim.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); 
} 

I angular2-jwt in meine Pakete .json Abhängigkeiten und installiert es bereits. Ich weiß wirklich nicht, was das Problem ist.

UPDATE:

die Tests Ran wieder und ohne Grund, dieses Mal ist es lädt die angular2-jwt.js! Aber noch ein anderes Problem: Diese Datei hat eine Linie: require ('...'), so erhalte ich die folgenden Fehler in Konsole Karma Browser, um diese Zeit:

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

Answer 1

Versuchen Sie, ...

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

... bis ...

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

... in Ihrer Datei karma.config.js.

Die erste Zeile des Codes sagt Karma die Standardwerte für eine Datei zu verwenden, die wie

folgt

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

die Datei Einschließlich Tells Karma die Datei mit einem Skript-Tag zu laden, das nicht das, was man ist Wollen Sie, wenn Sie eine Anwendung mit Systemjs laden.

Ich habe gerade über diese kniffligen Konfigurationseinstellungen gelesen. Ich habe einen Link zum folgenden Artikel eingefügt, wenn Sie interessiert sind. Ich fand es sehr hilfreich.

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

Answer 2

die appBase in karma.config.js ändern als

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