測試模塊無法解析正在測試的模塊[Angular4，Karma，Jasmine]

Question

我有一個創建爲演示項目的小型TypeScript應用程序。它使用的是Angular 4，Karma，Webpack 2和Jasmine。

該應用程序生成成功，我可以在瀏覽器中運行它。

的測試不工作，當我在命令行中運行karma start，我看到這樣的消息：

ERROR in ./app/welcome/app.welcome.spec.ts Module not found: Error: Can't resolve './app.welcome' in 'D:\ng-ts-demo\app\welcome'
@ ./app/welcome/app.welcome.spec.ts 4:20-44
@ ./app .spec.ts
@ ./app/test-main.ts

奇怪的是，該app.welcome.ts文件在同一目錄作爲app.welcome.spec.ts，但它仍然無法找到它！從消息看來，問題是由test-main.ts文件沒有加載* .ts文件，只導致* .spec.ts文件引起的。

我跟着官方的Angular 4/Webpack指南here，我似乎沒有錯過任何關鍵的東西。

這裏是我的測試main.ts文件：

Error['stackTraceLimit'] = Infinity; 

import 'core-js/es7/reflect'; 
import 'reflect-metadata'; 
import 'zone.js'; 
import 'zone.js/dist/long-stack-trace-zone'; 
import 'zone.js/dist/sync-test'; 
import 'zone.js/dist/proxy'; 
import 'zone.js/dist/jasmine-patch'; 
import 'zone.js/dist/async-test'; 
import 'zone.js/dist/fake-async-test'; 

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

let appContext = require.context('./', true, /\.spec\.ts/); // is this line the problem? 

appContext.keys().forEach(appContext); 

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); 

這裏是我的Karma.conf.js文件：

'use strict'; 

const webpack = require('webpack'); 

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

     basePath: '', 
     frameworks: ['jasmine'], 
     files: [ 
      { pattern: './app/test-main.ts' } 
     ], 
     exclude: [], 
     preprocessors: { 
      './app/test-main.ts': ['webpack', 'sourcemap'] 
     }, 
     reporters: ['progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: false, 
     browsers: ['ChromeHeadless'], 
     customLaunchers: { 
      ChromeHeadless: { 
       base: 'Chrome', 
       flags: [ 
        '--headless', 
        '--remote-debugging-port=9222', 
        '--disable-gpu', 
        '--disable-plugins', 
        '--window-size=0,0', 
        '--window-position=-9999,0' 
       ], 
      }, 
     }, 
     singleRun: true, 
     concurrency: Infinity, 
     webpack: { 
      module: { 
       rules: [{ 
        test: /\.ts$/, 
        use: [ 
         { 
          loader: 'awesome-typescript-loader', 
          options: { 
           configFileName: './tsconfig.json' 
          } 
         }, 
         'angular2-template-loader' 
        ] 
       }] 
      }, 
      devtool: 'inline-source-map', 
      plugins: [ 
       new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, './app') 
      ] 
     }, 
     webpackMiddleware: { 
      stats: 'errors-only' 
     }, 
     webpackServer: { 
      noInfo: true 
     } 
    }); 
} 

這裏是app.welcome.spec.ts文件：

import { TestBed }   from '@angular/core/testing'; 
import { WelcomeComponent } from './app.welcome'; 

describe('The Welcome component', function() { 

    let component: WelcomeComponent; 

    beforeEach(function() { 
     TestBed.configureTestingModule({ 
      declarations: [WelcomeComponent] 
     }); 

     let fixture = TestBed.createComponent(WelcomeComponent); 
     component = fixture.componentInstance; 
    }); 

    it('should be a component', function() { 
     expect(component).toBeDefined(); 
    }); 

    it('should have a welcome message', function() { 
     expect(component.welcomeMessage).toEqual('Welcome to TypeScript!'); 
    }); 

}); 

這裏是app.welcome.ts模塊（這是在同一文件夾中的規範文件，但神不知鬼不覺無法找到）：

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

@Component({ 
    selector: 'my-app', 
    template: '<h1>{{welcomeMessage}}</h1>', 
}) 

export class WelcomeComponent { 
    welcomeMessage = 'Welcome to TypeScript!'; 
} 

Answer 1

在完成這項工作時需要克服許多問題。第一次修復是karma.conf.js內的決心配置添加到webpack配置：

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

這解決的不是能夠導入他們的測試文件我的測試文件的問題。

這就導致了第二個問題 - 測試文件本身並沒有被執行的（我可以看到在命令行輸出Executed 0 of 0 ERROR運行測試時調試測試（通過設置singleRun到false和ChromeHeadless改變瀏覽器。定期Chrome顯示在控制檯中的錯誤：

Refused to execute script from ' http://localhost:9876/base/test-main.ts ' because its MIME type ('video/mp2t') is not executable.

這是影響Chrome 55歲以上，有是需要現在稍微哈克修復一個新的問題，我不得不把它添加到karma.conf.js文件（不在webpack配置部分雖然）：

mime: { 
    'text/x-typescript': ['ts'] 
}, 

本文摘自this問題。最後現在測試正在運行:)

現在得到覆蓋工作也...