Karma setup for Angular 2. - karma-jasmine

Question

I am trying to setup Karma with Jasmine for testing my Angular2 app. Karma fails to append extensions for imports in spec files. For example my spec file has import {TileComponent} from './tiles.component';
When I run Karma I get the following error: http://localhost:9876/base/wwwroot/app/tiles/tiles.component 404 (Not Found)
If I try to go to this link and manually apend js at the end it will load my file.
karma.conf.js:
module.exports = function (config) {
var appBase = 'wwwroot/app/';
var appAssets = '/base/app/';
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-htmlfile-reporter')
],
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [ 'node_modules/systemjs/dist/system.src.js',
'node_modules/core-js/client/shim.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/zone.js/dist/zone.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',
// RxJs.
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
{ pattern: 'node_modules/#angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false },
{ pattern: 'systemjs.config.js', included: false, watched: false },
//{ pattern: 'karma-test-shim.js', included: false, watched: false },
//'systemjs.config.js',
'karma-test-shim.js',
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: 'wwwroot/styles/**/*.css', included: false, watched: true },
{ pattern: 'app/**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false }
],
proxies: {
"/app/": appAssets
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'html'],
htmlReporter: {
outputFile: '_test-output/tests.html',
pageTitle: 'Unit Tests',
subPageTitle: __dirname
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
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 /\.spec\.js$/.test(path);
}
function isBuiltFile(path) {
var builtPath = '/base/wwwroot/';
return isJsFile(path) && (path.substr(0, builtPath.length) === builtPath);
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);
System.config({
baseURL: '/base',
packageWithIndex: true, // sadly, we can't use umd packages (yet?)
map: {
'http://localhost:9876/base/wwwroot/app/app.component': 'http://localhost:9876/base/wwwroot/app/app.component.js'
}
});
System.import('systemjs.config.js')
.then(function () {
return 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);

Answer 1

The problem was that I was importing system.config.js twice. I removed import from karma.conf.js file.
I also did some minor path changes.