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

Question

我有一个作为演示项目创建的小型 TypeScript 应用程序。它使用 Angular 4、Karma、Webpack 2 和 Jasmine。

应用程序构建成功，我可以在浏览器中运行它。

测试不起作用，当我在命令行中运行karma start 时，我看到如下消息：

./app/welcome/app.welcome.spec.ts 中的错误 未找到模块：错误：无法解析“D:\ng-ts-demo\app\welcome”中的“./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，我似乎没有遗漏任何关键内容。

这是我的 test-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 模块（它与 spec 文件在同一个文件夹中，但神秘地找不到）：

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 在控制台中显示错误：

拒绝执行来自“http://localhost:9876/base/test-main.ts”的脚本，因为它的 MIME 类型 ('video/mp2t') 不可执行。

这是一个影响 Chrome 55+ 的新问题，目前需要进行一些小技巧的修复；我必须将此添加到 karma.conf.js 文件中（但不在 webpack 配置部分）：

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

此提示是在this 问题中获得的。终于现在测试正在运行:)

现在让覆盖范围也起作用...