我一直在审查这里提出的所有类似问题,但是似乎没有答案可以解决我的问题。 我正在使用Karma,Jasmine和Webpack测试Angular 7应用程序。当前,测试正在执行并通过(我仅测试组件和服务已创建)。但是,当Karma完成并关闭进程(Ctrl + C或使用singleRun = true自动关闭)时,会出现以下错误:
Cannot read property 'success' of undefined
TypeError: Cannot read property 'success' of undefined
at TestCommand.runSingleTarget (/home/oriol/microfrontends/spa3/monitor-map/node_modules/@angular/cli/models/packages/angular/cli/models/architect-command.ts:242:21)
at process._tickCallback (internal/process/next_tick.js:68:7)
我的karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('ts-loader'),
require('karma-sourcemap-loader'),
require('karma-source-map-support'),
require('karma-webpack')
],
files: [
'node_modules/zone.js/dist/zone.js',
'test-bundle.ts'
],
preprocessors: {
'test-bundle.ts': ['sourcemap', 'webpack']
},
webpack: require('./webpack.config.js'),
webpackServer: { noInfo: true },
webpackMiddleware: {
logLevel: 'warn',
stats: {
chunks: false
}
},
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage/monitor-map'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
我的test-bundle.ts:
import 'core-js/proposals/reflect-metadata';
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./src/', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
我的webpack.conf.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
module.exports = {
entry: {
nav: 'src/main.single-spa.ts',
},
output: {
library: 'map',
libraryTarget: 'umd',
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ parser: { System: false } },
{
test: /\.js?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'babel-loader',
},
{
test: /\.tsx?$/,
loaders: ['ts-loader', 'angular2-template-loader'],
//exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]'
}
}
],
exclude: [path.resolve(__dirname, 'node_modules')],
},
{
test: /\.css$/,
include: [path.resolve(__dirname, 'node_modules')],
use: ['style-loader', 'css-loader']
},
{
test: /\.(scss|sass)$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
sourceMap: true,
},
}
}
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
/*options: {
name: "[name].[ext]",
limit: 10000,
publicPath: '/assets/'
}*/
}
]
}],
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
extensions: ['.ts', '.js']
},
optimization: {
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.resolve(__dirname, '../src')
),
new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }])
],
devtool: 'source-map',
externals: [
/^@demo\/*/,
/^single-spa$/,
/^fontawesome$/
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
};
我的angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"monitor-map": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "mon-map",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "single-spa-angular:build",
"options": {
"outputPath": "dist/monitor-map",
"index": "src/index.html",
"main": "src/main.single-spa.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "single-spa-angular:dev-server",
"options": {
"browserTarget": "monitor-map:single-spa"
},
"configurations": {
"production": {
"browserTarget": "monitor-map:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "monitor-map:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "test-bundle.ts",
"polyfills": "polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"single-spa": {
"builder": "single-spa-angular:build",
"options": {
"outputPath": "dist/monitor-map",
"index": "src/index.html",
"main": "src/main.single-spa.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"single-spa-serve": {
"builder": "single-spa-angular:dev-server",
"options": {
"browserTarget": "monitor-map:single-spa"
},
"configurations": {
"production": {
"browserTarget": "monitor-map:build:production"
}
}
}
}
},
"monitor-map-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "monitor-map:serve"
},
"configurations": {
"production": {
"devServerTarget": "monitor-map:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "monitor-map"
}
如果需要,我将编辑更多文件。感谢您的帮助!
编辑:事实证明我使用了错误的配置文件,并尝试使用angular-cli,尽管我确实不需要它。