How to set up Webpack + Karma with Angular 4?

Question

I have problem when I run test I get this error:

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

Here is my webpack set up:

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'
        }
      ]
    }
  };
};

here is karma.conf.js set up:

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

And 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());

Anyone know how to make this work correctly?

Answer 1

I've done something similar. To solve this problem, I used karma-webpack plugin. I've set my spec files at karma.conf instead of karma-shim, and added these plugins there as well:

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

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

And you should install them with npm of course.

You don't need to specify the entry option in the webpack config for testing with karma, karma watches the test entry points.

I see this question is a bit old, but maybe this could be useful for others.