使用Karma的混合角度应用程序测试无法加载HTML

我们有一个混合的Angular应用程序,它使用karma进行单元测试。我试图添加我们的第一套测试,但我得到了一些错误,表明因果报应无法找到答案 dashboard.component.html .

视图:

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

@Component({
    templateUrl: './views/components/dashboard/dashboard.component.html'
})
export class DashboardComponent implements OnInit {
    constructor() {}

    ngOnInit() {
        console.log('works!');
    }
}

这是我的 karma.config.js

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['angular', 'jasmine'],
        files: [
            { pattern: 'src/test.ts', watched: false },
            { pattern: 'dist/views/components/dashboard/dashboard.component.html', included: false, watched: true }
        ],
        exclude: [],
        preprocessors: {
            'src/test.ts': ['webpack', 'sourcemap']
        },
        webpack: require('./webpack-base.config'),
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        singleRun: true,
        concurrency: Infinity,
        browsers: ['Chrome_Headless'],
        customLaunchers: {
            Chrome_Headless: {
                base: 'Chrome',
                flags: [
                    '--headless',
                    '--disable-gpu',
                    '--remote-debugging-port=9222'
                ]
            },
            Chrome_without_security: {
                base: 'Chrome',
                flags: [
                    '--headless',
                    '--disable-gpu',
                    '--remote-debugging-port=9222',
                    '--disable-web-security'
                ]
            }
        },
        // workaround for typescript and chrome/headless
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        }
    });
};

我们的混合应用程序使用Webpack进行编译。所有视图文件都复制到 /view . 这是我们的网页文件:

/* eslint-env node */
const webpack = require('webpack');
const helpers = require('./helpers');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
    filename: 'css/[name].[hash].css',
    disable: process.env.NODE_ENV === 'development'
});

module.exports = {
    mode: 'development',
    entry: {
        app: './src/js/index.ts'
    },
    resolve: {
        extensions: ['.ts', '.js', '.html'],
        alias: {
            '@angular/upgrade/static':
                '@angular/upgrade/bundles/upgrade-static.umd.js'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body'
        }),
        new CopyWebpackPlugin([
            { from: './src/views', to: 'views' },
            { from: './src/js/components', to: 'views/components', ignore: ['*.ts', '*.scss']},
            { from: './src/img', to: 'img' },
            { from: './src/config.js', to: '' }
        ]),
        extractSass
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        historyApiFallback: {
            disableDotRule: true
        }
    },
    output: {
        filename: 'js/[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular-router-loader']
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                                import: true,
                                minimize: true,
                                sourceMap: true,
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    fallback: 'style-loader'
                })
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

最后,这是我非常简单的测试:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashboardComponent } from './dashboard.component';

describe('The Dashboard', () => {
    let component: DashboardComponent;
    let fixture: ComponentFixture<DashboardComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DashboardComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(DashboardComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should be created', () => {
        expect(component).toBeTruthy();
    });
});

此应用程序在以下情况下正常工作: npm start

错误:“未处理的承诺拒绝:”,“未能加载” 视图/components/dashboard/dashboard.component.html',';分区:', 视图/components/dashboard/dashboard.component.html',未定义

TestBed.configureTestingModule()