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

拒绝执行“https://developers.facebook.com/docs/plugins/page-plugin”脚本，因为其MIME类型（“video / mp2t”）不可执行。

这是一个影响Chrome 55+的新问题，现在需要稍微修复一下;我不得不将其添加到karma.conf.js文件中（不在webpack配置部分中）：

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

此提示已在http://localhost:9876/base/test-main.ts问题中被提及。最后，现在测试正在运行:)

现在让覆盖面工作......

测试模块无法解析被测模块[Angular4，Karma，Jasmine]

1 个答案: