测试模块无法解析正在测试的模块[Angular4，Karma，Jasmine]

问题描述：

我有一个创建为演示项目的小型TypeScript应用程序。它使用的是Angular 4，Karma，Webpack 2和Jasmine。测试模块无法解析正在测试的模块[Angular4，Karma，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!'; 
}

答

在完成这项工作时需要克服许多问题。第一次修复是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问题。最后现在测试正在运行:)

现在得到覆盖工作也...

测试模块无法解析正在测试的模块[Angular4，Karma，Jasmine]

相关推荐