Webpack Karma无法在.spec中加载angular2组件

Question

Config -

    "webpack": "1.12.11",
    "@types/jasmine": "2.5.41",
    "typescript": "2.0.10",
    "awesome-typescript-loader": "^2.2.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.1.0",
    "karma-sourcemap-writer": "^0.1.2",
    "karma-spec-reporter": "0.0.26",
    "karma-mocha": "^0.2.0",
    "karma-mocha-reporter": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.4",
    "karma-webpack": "^1.5.1",

karma.conf

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

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

    resolve: {
        extensions: ['.js', '.ts', '.html']
    },

    // list of files/patterns to load in the browser
    files: [ 
     // Polyfills
          'node_modules/core-js/client/shim.js',
          // 'node_modules/reflect-metadata/Reflect.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',

          // 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: 'systemjs.config.js', included: false, watched: false},
          // {pattern: 'systemjs.config.extras.js', included: false, watched: false},
          // 'karma-test-shim.js',

          // // transpiled application & spec code paths loaded via module imports
          // {pattern: appBase + '**/*.js', included: false, watched: true},
          // {pattern: testBase + '**/*.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: appSrcBase + '**/*.ts', included: false, watched: false},
          // {pattern: appBase + '**/*.js.map', included: false, watched: false},
          // {pattern: testSrcBase + '**/*.ts', included: false, watched: false},
          // {pattern: testBase + '**/*.js.map', included: false, watched: false},

          { pattern: 'spec.bundle.ts', watched: false } // Our entry point
    ],

    // files to exclude
    exclude: [],

    plugins: [
      require("karma-jasmine"),
      require("karma-phantomjs-launcher"),
      require("karma-mocha"),
      require("karma-mocha-reporter"),
      require("karma-sourcemap-loader"),
      require("karma-webpack")
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.ts': ['webpack', 'sourcemap'] },

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
          { test: /\.ts$/, exclude: [/node_modules/], loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']},
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
          { test: /\.css$/, loader: 'style!css' }
        ]
      }
    },

    webpackServer: {
      noInfo: false // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha'],

    // web server port
    port: 9876,

    // enable colors in the output
    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,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: false,

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

    // if true, Karma runs tests once and exits
    singleRun: true
  });
};

spec.bundle.ts

import { TestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

// load all specs in ./src .
var context = require.context('./src/javascripts/moda-ng2', true, /\.spec\.ts/);

context.keys().map(context);

banner.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

banner.spec.ts

import {} from 'jasmine';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { BannerComponent } from './banner.component';

describe('BannerComponent (inline template)', () => {

    let comp:    BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;
    let de:      DebugElement;
    let el:      HTMLElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ BannerComponent ], // declare the test component
        });

        fixture = TestBed.createComponent(BannerComponent);

        comp = fixture.componentInstance; // BannerComponent test instance

        // query for the title <h1> by CSS element selector
        de = fixture.debugElement.query(By.css('h1'));
        el = de.nativeElement;
    });


    it('should display original title', () => {
        //fixture.detectChanges();
        expect(el.textContent).toContain(comp.title);
    });

    it('should display a different test title', () => {
        comp.title = 'Test Title';
        //fixture.detectChanges();
        expect(el.textContent).toContain('Test Title');
    });

});

On running "karma start" I get the following error -

> karma start


START:
Hash: f4683f5fa2953dc3a97c
Version: webpack 1.12.11
Time: 37ms
webpack: Compiled successfully.
webpack: Compiling...
Hash: 1cb26b5be98c7bdd7ec0
Version: webpack 1.12.11
Time: 7040ms
         Asset     Size  Chunks             Chunk Names
spec.bundle.ts  2.13 MB       0  [emitted]  spec.bundle.ts
chunk    {0} spec.bundle.ts (spec.bundle.ts) 2.07 MB [rendered]
    [0] ./spec.bundle.ts 1.73 kB {0} [built]
    [1] ./~/@angular/core/bundles/core-testing.umd.js 46.2 kB {0} [built]
    [2] ./~/@angular/core/bundles/core.umd.js 461 kB {0} [built]
    [3] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
    [4] ./~/rxjs/util/root.js 470 bytes {0} [built]
    [5] ./~/rxjs/Subject.js 5.33 kB {0} [built]
    [6] ./~/rxjs/Observable.js 5.17 kB {0} [built]
    [7] ./~/rxjs/util/toSubscriber.js 764 bytes {0} [built]
    [8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
    [9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
   [10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
   [11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
   [12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
   [13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
   [14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
   [15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
   [16] ./~/rxjs/Observer.js 193 bytes {0} [built]
   [17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
   [18] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
   [19] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
   [20] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js 4.68 kB {0} [built]
   [21] ./~/@angular/compiler/bundles/compiler-testing.umd.js 24.1 kB {0} [built]
   [22] ./~/@angular/compiler/bundles/compiler.umd.js 1.18 MB {0} [built]
   [23] ./~/@angular/platform-browser/bundles/platform-browser-testing.umd.js 7.91 kB {0} [built]
   [24] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 170 kB {0} [built]
   [25] ./~/@angular/common/bundles/common.umd.js 137 kB {0} [built]
   [26] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 7.03 kB {0} [built]
   [27] ./src/javascripts/moda-ng2 \.spec\.ts 198 bytes {0} [built]
   [28] ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 1.65 kB {0} [optional] [built] [1 error]

**ERROR in ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./banner.component in /home/denimuser/Documents/maya/src/javascripts/moda-ng2/src/app/services
 @ ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 4:25-54
webpack: Failed to compile.**

ERROR in ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts Module not found: Error: Cannot resolve 'file' or 'directory' ./banner.component in /home/denimuser/Documents/maya/src/javascripts/moda-ng2/src/app/services @ ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 4:25-54 webpack: Failed to compile.

BUT whereas this test runs - simple.spec.ts

import {} from 'jasmine';
describe('Meaningful Test', () => {

    it('1 + 1 => 2', () => {

        expect(1 + 1).toBe(2);
    });
});

So this statement import { BannerComponent } from './banner.component'; in banner.spec.ts is not able to load the "BannerComponent"

What am I doing wrong. Please help :)

Answer 1

In karma config under the files option you just included the spec Add entry path for your src files also because the files option tells karma to load the files in the browser so I think here is the main issue. Try for that.

Answer 2

Finally got it working by adding

      resolve: {
          extensions: ['', '.js', '.ts', '.html']
      },

to webpack's test config!

Damn!! what a day it has been! :-/