angular - 测试模块无法解析正在测试的模块 [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而且我似乎没有遗漏任何重要的东西。

这是我的 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 模块(它与规范文件位于同一文件夹中，但神秘地找不到):

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 配置:

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 中找到的问题。现在终于可以运行测试了:)

现在也让覆盖工作...