Wie richtet man Webpack + Karma mit Angular 4 ein?

Question

I Problem haben, wenn ich Test laufen bekomme ich diesen Fehler:

WARNING in ./src/app/home/home.component.spec.ts Module parse failed: /home/master/Documents/ai/loan-market/loanapp/src/app/home/home.component.spec.ts Unexpected token (5:17) You may need an appropriate loader to handle this file type. | | describe('Home Component test',() => { | let component: any = HomeComponent; | | beforeEach(() => { @ ./src .spec.ts @ ./karma-shim.js

Hier ist meine webpack ein:

const webpack = require('webpack'); 
const path = require('path'); 

module.exports =() => { 
    return { 
    entry: { 
     test: './src/main.client.ts' 
    }, 
    output: { 
     path: './dist', 
     filename: '[name].bundle.js' 
    }, 
    resolve: { 
     extensions: ['.js', '.ts', '.html'] 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
      'awesome-typescript-loader', 
      'angular2-template-loader' 
      ] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'raw' 
     } 
     ] 
    } 
    }; 
}; 

hier karma.conf.js ein:

// Karma configuration 
// Generated on Fri Jun 23 2017 14:56:14 GMT+0200 (CEST) 

module.exports = function(config) { 
    config.set({ 

    // base path that will be used to resolve all patterns (eg. files, exclude) 
    basePath: '', 


    // frameworks to use 
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
    frameworks: ['jasmine'], 


    // list of files/patterns to load in the browser 
    files: [ 
     { pattern: './karma-shim.js', watched: false } 
    ], 


    // list of files to exclude 
    exclude: [ 
    ], 


    // preprocess matching files before serving them to the browser 
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
     './karma-shim.js': ['webpack', 'sourcemap'] 
    }, 
    webpack: require('./webpack/webpack-karma.config'), 
    webpackMiddleware: { 
     // webpack-dev-middleware configuration 
     // i. e. 
     stats: 'errors-only' 
    }, 
    webpackServer: { 
     noInfo: true // please don't spam the console when running in karma! 
    }, 

    // test results reporter to use 
    // possible values: 'dots', 'progress' 
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter 
    reporters: ['progress'], 


    // 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_INFO, 


    // enable/disable watching file and executing tests whenever any file changes 
    autoWatch: true, 


    // start these browsers 
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 
    browsers: ['Chrome'], 


    // Continuous Integration mode 
    // if true, Karma captures browsers, runs the tests and exits 
    singleRun: false, 

    // Concurrency level 
    // how many browser should be started simultaneous 
    concurrency: Infinity 
    }) 
} 

Und karma-shim.js :

Error.stackTraceLimit = Infinity; 

require('core-js/client/shim'); 
require('reflect-metadata'); 

require('ts-helpers'); 

require('zone.js/dist/zone'); 
require('zone.js/dist/long-stack-trace-zone'); 
require('zone.js/dist/proxy'); 
require('zone.js/dist/sync-test'); 
require('zone.js/dist/jasmine-patch'); 
require('zone.js/dist/async-test'); 
require('zone.js/dist/fake-async-test'); 


/* 
Ok, this is kinda crazy. We can use the the context method on 
require that webpack created in order to tell webpack 
what files we actually want to require or import. 
Below, context will be a function/object with file names as keys. 
using that regex we are saying look in client/app and find 
any file that ends with '.spec.ts' and get its path. By passing in true 
we say do this recursively 
*/ 
var appContext = require.context('./src', true, /\.spec\.ts/); 

// get all the files, for each file, call the context function 
// that will require the file and load it up here. Context will 
// loop and require those spec files here 
appContext.keys().forEach(appContext); 

// Select BrowserDomAdapter. 
// see https://github.com/AngularClass/angular2-webpack-starter/issues/124 
// Somewhere in the test setup 
var testing = require('@angular/core/testing'); 
var browser = require('@angular/platform-browser-dynamic/testing'); 

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); 

Wer weiß, wie das funktioniert?

Answer 1

Ich habe etwas ähnliches getan. Um dieses Problem zu lösen, habe ich karma-webpack Plugin verwendet. Ich habe meine spec Dateien auf karma.conf statt Karma-Shim gesetzt, und fügte hinzu, diese Plugins auch dort:

files: [ 
    './karma-shim.js', 
    'src/**/*.spec.ts' 
], 

plugins: [ 
    "karma-webpack", 
    'karma-chrome-launcher', 
    'karma-jasmine' 
], 

Und Sie sollten sie mit npm natürlich installieren.

Sie müssen die Eingabeoption in der Webpack-Konfiguration nicht angeben, um mit Karma zu testen, karma überwacht die Testeinstiegspunkte.

Ich sehe diese Frage ist ein bisschen alt, aber vielleicht könnte dies für andere nützlich sein.