我在使用带有Karma的angular-cli进行角度2应用的单元测试时遇到了问题，我能够使量角器在e2e测试中正常工作。
我运行测试，这是我得到的
我正在一个未初始化angular-cli的angular2应用程序中运行测试。我相信这个问题围绕着tsconfig.json的一些方式。
我已经通过ng init使用angular-cli初始化了angular2应用程序，当我使用ng测试运行该应用程序时，它工作正常，我相信tsconfig是hammerjs的问题，其他js依赖项以某种方式干扰。
非常感谢任何帮助。
这是我的Karma.conf.js：
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './app/test.ts', watched: false }
],
preprocessors: {
'./app/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: '../angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
这是我的package.json
{
"version": "1.0.0",
"description": "",
"main": "../wwwroot/index.html",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base ui/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"dependencies": {
"@angular/common": "~2.0.1",
"@angular/compiler": "~2.0.1",
"@angular/core": "~2.0.1",
"@angular/forms": "~2.0.1",
"@angular/http": "~2.0.1",
"@angular/material": "^2.0.0-alpha.9",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.0",
"@angularclass/hmr-loader": "~3.0.2",
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.7",
"angular-in-memory-web-api": "~0.1.1",
"angular2-datatable": "^0.5.0",
"assets-webpack-plugin": "^3.4.0",
"bootstrap": "^4.0.0-alpha.4",
"chart.js": "^2.3.0",
"core-js": "^2.4.1",
"extract-text-webpack-plugin": "^1.0.1",
"font-awesome": "^4.6.3",
"font-awesome-webpack": "0.0.4",
"hammerjs": "^2.0.8",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"ng2-charts": "^1.4.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.17"
},
"devDependencies": {
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "^2.2.34",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.27",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.34",
"angular-cli": "1.0.0-beta.19-3",
"angular2-template-loader": "^0.5.0",
"autoprefixer": "^6.5.0",
"awesome-typescript-loader": "^2.2.1",
"bootstrap-loader": "^2.0.0-beta.12",
"clean-webpack-plugin": "^0.1.10",
"codelyzer": "^1.0.0-beta.1",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.6.5",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"karma-typescript": "^2.1.0",
"karma-webpack": "^1.8.0",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"node-sass": "^3.10.1",
"parse5": "^1.3.2",
"phantomjs": "^2.1.7",
"postcss-flexbugs-fixes": "^2.0.0",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^3.1.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "^1.1.2",
"ts-node": "^1.3.0",
"tslint": "3.15.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.5.1",
"typescript": "^2.0.8",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.1"
}
}
这是我的angular-cli.json
{
"project": {
"version": "1.0.0-beta.19-3",
"name": "core"
},
"apps": [
{
"root": "app",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./ui/protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./ui/karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
这是我的webpack.common.js
const webpack = require('webpack');
const helpers = require('./helpers');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const HMR = helpers.hasProcessFlag('hot');
const METADATA = {
title: 'CORE',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
module.exports = function(options) {
isProd = options.env === 'production';
return {
metadata: METADATA,
entry: {
'polyfills': './ui/polyfills.browser.ts',
'vendor': './ui/vendor.browser.ts',
'main': './ui/boot.ts'
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.scss', '.css', '.less'],
modules: [helpers.root('ui'), 'node_modules'],
},
module: {
preLoaders: [
{
test: /\.ts$/,
loader: 'string-replace-loader',
query: {
search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
flags: 'g'
},
include: [helpers.root('ui')]
},
],
loaders: [
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
// Font Definitions
//{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=assets/fonts/[name].[ext]' },
//{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
//{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
//{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
//{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' },
{
test: /\.ts$/,
loaders: [
'@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
'awesome-typescript-loader',
'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.json$/,
loader: 'json-loader'
},
//{
// test: /\.(eot|svg|ttf|woff|woff2)$/,
// loader: 'file?name=[name].[ext]'
//},
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
//{ test: /bootstrap\/dist\/css\/umd\//, loaders: ['to-string-loader', 'css-loader'] },
{
test: /\.css$/,
loaders: ['style','to-string-loader', 'css-loader']
},
//{
// test: /\.scss$/,
// exclude: /node_modules/,
// loader: 'raw-loader!style-loader!css-loader!sass-loader'
//},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('ui/index.html')]
},
{
test: /\.(jpg|png|gif)$/,
loader: 'file'
}
],
postLoaders: [
{
test: /\.js$/,
loader: 'string-replace-loader',
query: {
search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);',
replace: 'var sourceMappingUrl = "";',
flags: 'g'
}
}
]
},
postcss: [autoprefixer],
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
"window.Tether": 'tether',
'window.jQuery': 'jquery',
'window.$': 'jquery',
}),
//new ProvidePlugin({
// jQuery: 'jquery',
// $: 'jquery',
// jquery: 'jquery',
// "window.Tether": 'tether'
//}),
new ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('ui') // location of your src
),
new CleanWebpackPlugin(
[
'./wwwroot/dist',
//'./wwwroot',
]
),
new CopyWebpackPlugin([{
from: 'ui/assets',
to: 'assets'
}]),
new HtmlWebpackPlugin({
template: 'ui/index.html',
chunksSortMode: 'dependency'
}),
new HtmlElementsPlugin({
headTags: require('./head-config.common')
}),
],
};
}
这是我的tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"baseUrl": "./ui",
"paths": {},
"lib": [
"dom",
"es6"
],
"types": [
"hammerjs",
"node",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}
这是我的test.ts
import '../polyfills.browser.ts';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])
// First, initialize the Angular testing environment.
.then(([testing, testingBrowser]) => {
testing.getTestBed().initTestEnvironment(
testingBrowser.BrowserDynamicTestingModule,
testingBrowser.platformBrowserDynamicTesting()
);
})
// Then we find all the tests.
.then(() => require.context('./', true, /\.spec\.ts/))
// And load the modules.
.then(context => context.keys().map(context))
// Finally, start Karma to run the tests.
.then(__karma__.start, __karma__.error);
这是我的polyfil.browsers.ts
// TODO(gdi2290): switch to DLLs
// Polyfills
// import 'ie-shim'; // Internet Explorer 9 support
// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// Typescript emit helpers polyfill
import 'ts-helpers';
if ('production' === ENV) {
// Production
} else {
// Development
Error.stackTraceLimit = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}