由于我想将 AngularJs 应用程序迁移到 Angular 7,因此我使用 ngUpgrade 创建了一个混合应用程序。旧的 AngularJs 应用程序现在嵌入在新的 Angular 应用程序中。
当我运行ng test
它时,它会触发我的 Angular 测试,这很好。但我也想运行用 AngularJs 编写的旧测试。
目前我的 Karma 配置如下所示:
'use strict';
const webpackConfig = require('./karma.webpack.config');
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular', 'es6-shim'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-es6-shim'),
require('karma-junit-reporter'),
require('karma-webpack'),
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
mime: {
'text/x-typescript': ['ts','tsx']
},
exclude: [
'**/*.html'
],
preprocessors: {
'./karma.entrypoint.ts': ['webpack']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
junitReporter : {
// results will be saved as $outputDir/$browserName.xml
outputDir : 'build/test-results/test/'
},
reporters: ['progress', 'kjhtml', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
该./karma.webpack.config
文件是:
const config = require('./webpack.config.js')();
const webpack = require('webpack');
const path = require('path');
const nibStylusPlugin = require('nib');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = Object.assign({}, config, {
context: path.resolve(__dirname, '.'),
entry: {
test: './karma.entrypoint.ts'
},
mode: 'development',
devtool: 'cheap-module-inline-source-map',
optimization: {
splitChunks: false,
runtimeChunk: false
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
new webpack.ProvidePlugin({
"window.jQuery": "jquery",
tv4: "tv4"
}),
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
use: [nibStylusPlugin()],
import: ['~nib/lib/nib/index.styl'],
}
}
})
]
});
最后但并非最不重要的是karma.entrypoint.ts
:
import 'jquery';
import 'angular';
import 'angular-mocks';
import * as moment from 'moment';
import{appConfigMock} from './karma.app-mock.config';
window['__APP_CONFIG__'] = appConfigMock;
(<any>moment).suppressDeprecationWarnings = true;
const testsContext = (<any>require).context('./src/app/', true, /\.spec\.ts$/);
testsContext.keys().forEach(testsContext);
之前,当我只有 AngularJs 应用程序时,我使用 karma 命令以非常相似的结构运行测试。它利用我的 webpack 配置创建了一个新的 karma webpack 配置。现在,当我通过ng test
命令运行它时,我什至无法require
在'./karma.webpack.config'
业力配置的开头(我得到Invalid config file! TypeError: require(...) is not a function
)。
我应该如何处理这种情况来运行所有测试?