测试 - Angular2 jasmine，karma webpack，VS2015 - 未捕获错误：找不到模块

Question

我正在设置业力测试。

这就是我在做什么 我使用＆＃34; ASP.NET核心Angular 2入门应用程序（.Net Core）模板创建了一个VS 2015项目。

尝试使用Jasime设置一些类型的脚本测试，Karma我收到消息

＆＃34;测试名称：Chrome 51.0.2704（Windows 7 0.0.0） 测试结果：失败 结果消息：未捕获错误：找不到模块＆＃34; ../ app / components / home / home.component＆＃34; 结果StandardError：未捕获错误：找不到模块＆＃34; ../ app / components / home / home.component＆＃34; 在http://localhost:18527/base/ClientApp/test/service.spec.ts?3669dc7f120fe7689ae36618562e873f3f4e8065:76＆＃34;

这是我的package.json

 {
      "name": "Angular2Spa",
      "version": "0.0.0",
      "dependencies": {
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/core": "2.0.0",
        "@angular/forms": "2.0.0",
        "@angular/http": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "@angular/platform-server": "2.0.0",
        "@angular/router": "3.0.0",
        "@types/jasmine": "^2.5.41",
        "@types/node": "^6.0.38",
        "angular2-platform-node": "~2.0.10",
        "angular2-universal": "~2.0.10",
        "angular2-universal-polyfills": "~2.0.10",
        "aspnet-prerendering": "^1.0.6",
        "aspnet-webpack": "^1.0.11",
        "bootstrap": "^3.3.7",
        "css": "^2.2.1",
        "css-loader": "^0.25.0",
        "es6-shim": "^0.35.1",
        "expose-loader": "^0.7.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.9.0",
        "isomorphic-fetch": "^2.2.1",
        "jquery": "^2.2.1",
        "preboot": "^4.5.2",
        "raw-loader": "^0.5.1",
        "rxjs": "5.0.0-beta.12",
        "style-loader": "^0.13.0",
        "to-string-loader": "^1.1.5",
        "ts-loader": "^0.8.2",
        "typescript": "^2.0.0",
        "url-loader": "^0.5.7",
        "webpack": "^2.2.1",
        "webpack-externals-plugin": "^1.0.0",
        "webpack-hot-middleware": "^2.16.1",
        "webpack-merge": "^2.6.1",
        "zone.js": "^0.6.21"
      },
      "devDependencies": {
        "awesome-typescript-loader": "3.0.0-beta.10",
        "jasmine-core": "^2.5.2",
        "karma": "^1.4.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-jasmine": "^1.1.0",
        "karma-webpack": "^2.0.2"
      }
    }

这是karma.config

// Karma configuration
// Generated on Thu Feb 02 2017 10:25:26 GMT-0600 (Central Standard Time)

var webpackConfig = require('./webpack.config.js');
//webpackConfig.entry = {};
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: [
      'ClientApp/test/*spec.ts'
    ],


    // 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: {
        'ClientApp/test/*spec.ts': ['webpack'],

    },
    webpack: {
        module: webpackConfig.module,
        resolve: webpackConfig.resolve
    },


    // 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,
    logLevel: config.LOG_DEBUG,
    loggers : [
     {
         type: 'console'
     },
    {
        type: 'file',
        absolute: false,
        filename: 'log_file.log',
        maxLogSize: 20480,
        backups: 10,
    }],

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    //logLevel: config.LOG_DEBUG,


    // 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,
  //    webpackMiddleware: {
  //        // webpack-dev-middleware configuration
  //        // i.e.
  //    noInfo: true,
  //        // and use stats to turn off verbose output
  //    stats: {
  //        // options i.e. 
  //        chunks: false
  //    }
  //},

  //  plugins: [
  //      require("karma-webpack")
  //]
  })
}

这是我的webpack.config.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;

// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    resolve: { extensions: [ '', '.js','.ts'] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loaders: ['awesome-typescript-loader', 'angular2-router-loader'] },
            { test: /\.html$/, include: /ClientApp/, loader: 'raw' },
            { test: /\.css$/, include: /ClientApp/, loader: 'to-string!css' },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, include: /ClientApp/, loader: 'url', query: { limit: 25000 } }          


        ]
    }
};

// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot-client.ts' },
    output: { path: path.join(__dirname, './wwwroot/dist') },
    devtool: isDevBuild ? 'inline-source-map' : null,
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
    entry: { 'main-server': './ClientApp/boot-server.ts' },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map',
    externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});

module.exports = [clientBundleConfig, serverBundleConfig];

这是我的规范代码

/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HomeComponent } from '../app/components/home/home.component';
//var a = require('../app/components / home / home.component.ts');

describe('Counter', () => {

    let comp: HomeComponent;
    let fixture: ComponentFixture<HomeComponent>;

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

    fixture = TestBed.createComponent(HomeComponent);
    comp = fixture.componentInstance;


    it('Tittle Test', () => {

        expect(comp.title).toEqual('Counter value');
    });

});