จาวาสคริปต์ - การทดสอบหน่วยด้วย Karma ใน Angular 4 พร้อม Webpack

นี่คือไฟล์ karma.config.js ของฉัน -

module.exports = function (config) {

config.set({
basePath: '',
frameworks: ['jasmine'],

plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-jasmine-html-reporter'),
  'karma-webpack',
  'karma-babel-preprocessor',
  // 'babel-preset-es2015'
],

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']
  }
},
mime: {
  'text/x-typescript': ['ts']
},
files: [
  './src/client/app/phone/component/nokia.component.ts',
  './src/client/app/phone/component/nokia.spec.ts'
],

// Proxied base paths for loading assets
proxies: {
  // required for component assets fetched by Angular's compiler
  "/app/": appAssets
},
// webpack: configureWebpack(),
exclude: [],
preprocessors: {
  './src/client/app/phone/component/nokia.component.spec.ts': ['babel', 'webpack'],
},
// babelPreprocessor: {
//   options: {
//     "presets": ["es2015"]
//   }
// },
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});


 };

function configureWebpack() {
var webpackConfig = require('./webpack.config');
webpackConfig.entry = undefined; // karma will pass the proper 
argument for entry
return webpackConfig;
}

ปัญหาที่ฉันกำลังเผชิญคือฉันไม่สามารถเข้าถึงคอมโพเนนต์จากไฟล์สเปคได้ Karma แสดงข้อผิดพลาด

ข้อผิดพลาดใน ./src/client/app/phone/component/nokia.component.spec.ts ไม่พบโมดูล: ข้อผิดพลาด: ไม่สามารถหาค่า './nokia.component' ได้ใน '/media/folder/New Volume/.....path' @ ./src/client/app/phone/component/nokia.component.spec.ts 1:0-61

สิ่งที่ฉันได้

พื้นฐานแล้วฉันไม่สามารถเข้าถึงคำสั่ง import จากไฟล์สเปคได้ เนื่องจากคอมโพเนนต์ของเราใช้ฟีเจอร์ ES6 แต่การตั้งค่า Karma ของฉันไม่สามารถเข้าใจฟีเจอร์ ES6 เหล่านั้น

มีวิธีใดบ้างที่สามารถบอกหรือแปลงสิ่งต่าง ๆ ของฉันจาก ES6 เป็น ES5 เพื่อให้เบราว์เซอร์ของฉันสามารถเข้าใจสิ่งนี้ได้

เกี่ยวกับเรื่องนี้ฉันพบสิ่งนี้ 'babel-preset-es2015' แต่ฉันไม่สามารถใส่มันลงในไฟล์คอนฟิกของ Karma ได้

หรือมีวิธีอื่นไหม - ในการตั้งค่า Karma เพื่อที่ฉันจะสามารถทดสอบคอมโพเนนต์ทั้งหมดของฉันด้วย Karma Jasmine ใน Angular 4

หมายเหตุ - ฉันกำลังใช้ webpack โดยตรง (ไม่ใช่ Angular CLI)

กรุณาตอบสำหรับ webpack