测试karama，jasmine，webpack-找不到模块'./component.html'

Question

我正在使用karma-jasmine-webpack测试Angular 2，我收到错误消息 “结果消息：未捕获错误：找不到模块”./fetchdata.component.html“

我正在尝试为组件fetchdata.component编写测试规范。 Karma测试运行器抛出上述错误消息。

这是我的package.json

let screenWidth = (UIScreen.mainScreen().bounds).width
    let screenHeight = (UIScreen.mainScreen().bounds).height

    let firstVCView = sourceViewController.view
    let secondVCView = destinationViewController.view
    secondVCView.frame = CGRectMake(screenWidth, 0.0, screenWidth, screenHeight)

    // Access the app's key window and insert the destination view above the current (source) one.
    let window = UIApplication.sharedApplication().keyWindow
    window?.insertSubview(secondVCView, aboveSubview: firstVCView)

    // Animate the transition.
    UIView.animateWithDuration(0.3, animations: { () -> Void in
        firstVCView.frame = CGRectOffset(firstVCView.frame, -screenWidth, 0.0)
        secondVCView.frame = CGRectOffset(secondVCView.frame, -screenWidth, 0.0)

    }) { (Finished) -> Void in
        self.sourceViewController.presentViewController(self.destinationViewController ,
                                                        animated: false,
                                                        completion: nil)
    }

这是我的karma.conf.js

{
  "name": "Angular2Spa",
  "version": "0.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "static .",
    "test": "karma start"
  },
  "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",
    "core-js": "^2.4.1"
  },
  "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",
    "@types/node": "^6.0.45",
    "@types/webpack-env": "^1.12.1",
    "@types/jasmine": "2.5.41",
    "angular2-template-loader": "^0.5.0",
    "jasmine": "^2.5.2",
    "karma-sourcemap-loader": "^0.3.7",
    "node-static": "^0.7.9",
    "raw-loader": "^0.5.1",
    "typescript": "^2.0.3",
    "webpack": "^2.1.0-beta.25"
  }
}

这是main.js

// Karma configuration
// Generated on Fri Feb 03 2017 11:35:26 GMT-0600 (Central Standard Time)

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: 'ClientApp/test/main.js', watched: false }
   // { pattern: 'ClientApp/app/components/**/**.spec.ts', 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: {
        'ClientApp/test/main.js': ['webpack', 'sourcemap']
        //'ClientApp/app/components/**/**.spec.ts': ['webpack', 'sourcemap']
    },

    webpack: require('./webpack.config')({ env: 'test' }),

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


  })
}

app.spec.ts

require('../app//app.spec.ts');

这是我的测试规范fetchdata.component.spec.ts

/////

import 'core-js'; // ES6 + reflect-metadata
// zone.js
import 'zone.js/dist/zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test';
import 'zone.js/dist/jasmine-patch';

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

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

// load all specs in ./src .
const context = (require as any).context('./', true, /\.spec\.ts$/);
context.keys().map(context);