0
配置angular2组件 -的WebPack业力无法加载的.spec
"webpack": "1.12.11",
"@types/jasmine": "2.5.41",
"typescript": "2.0.10",
"awesome-typescript-loader": "^2.2.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.1.0",
"karma-sourcemap-writer": "^0.1.2",
"karma-spec-reporter": "0.0.26",
"karma-mocha": "^0.2.0",
"karma-mocha-reporter": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.4",
"karma-webpack": "^1.5.1",
karma.conf
module.exports = function (config) {
config.set({
// base path used to resolve all patterns
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
resolve: {
extensions: ['.js', '.ts', '.html']
},
// list of files/patterns to load in the browser
files: [
// Polyfills
'node_modules/core-js/client/shim.js',
// 'node_modules/reflect-metadata/Reflect.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
// {pattern: 'systemjs.config.js', included: false, watched: false},
// {pattern: 'systemjs.config.extras.js', included: false, watched: false},
// 'karma-test-shim.js',
// // transpiled application & spec code paths loaded via module imports
// {pattern: appBase + '**/*.js', included: false, watched: true},
// {pattern: testBase + '**/*.js', included: false, watched: true},
// // Asset (HTML & CSS) paths loaded via Angular's component compiler
// // (these paths need to be rewritten, see proxies section)
// {pattern: appBase + '**/*.html', included: false, watched: true},
// {pattern: appBase + '**/*.css', included: false, watched: true},
// // Paths for debugging with source maps in dev tools
// {pattern: appSrcBase + '**/*.ts', included: false, watched: false},
// {pattern: appBase + '**/*.js.map', included: false, watched: false},
// {pattern: testSrcBase + '**/*.ts', included: false, watched: false},
// {pattern: testBase + '**/*.js.map', included: false, watched: false},
{ pattern: 'spec.bundle.ts', watched: false } // Our entry point
],
// files to exclude
exclude: [],
plugins: [
require("karma-jasmine"),
require("karma-phantomjs-launcher"),
require("karma-mocha"),
require("karma-mocha-reporter"),
require("karma-sourcemap-loader"),
require("karma-webpack")
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: { 'spec.bundle.ts': ['webpack', 'sourcemap'] },
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
{ test: /\.ts$/, exclude: [/node_modules/], loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']},
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(scss|sass)$/, loader: 'style!css!sass' },
{ test: /\.css$/, loader: 'style!css' }
]
}
},
webpackServer: {
noInfo: false // prevent console spamming when running in Karma!
},
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// web server port
port: 9876,
// enable colors in the output
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// toggle whether to watch files and rerun tests upon incurring changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// if true, Karma runs tests once and exits
singleRun: true
});
};
spec.bundle.ts
import { TestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// load all specs in ./src .
var context = require.context('./src/javascripts/moda-ng2', true, /\.spec\.ts/);
context.keys().map(context);
banner.compo nent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-banner',
template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
title = 'Test Tour of Heroes';
}
banner.spec.ts
import {} from 'jasmine';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { BannerComponent } from './banner.component';
describe('BannerComponent (inline template)',() => {
let comp: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ BannerComponent ], // declare the test component
});
fixture = TestBed.createComponent(BannerComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
it('should display original title',() => {
//fixture.detectChanges();
expect(el.textContent).toContain(comp.title);
});
it('should display a different test title',() => {
comp.title = 'Test Title';
//fixture.detectChanges();
expect(el.textContent).toContain('Test Title');
});
});
在运行 “报应启动” 我碰到下面的错误 -
> karma start
START:
Hash: f4683f5fa2953dc3a97c
Version: webpack 1.12.11
Time: 37ms
webpack: Compiled successfully.
webpack: Compiling...
Hash: 1cb26b5be98c7bdd7ec0
Version: webpack 1.12.11
Time: 7040ms
Asset Size Chunks Chunk Names
spec.bundle.ts 2.13 MB 0 [emitted] spec.bundle.ts
chunk {0} spec.bundle.ts (spec.bundle.ts) 2.07 MB [rendered]
[0] ./spec.bundle.ts 1.73 kB {0} [built]
[1] ./~/@angular/core/bundles/core-testing.umd.js 46.2 kB {0} [built]
[2] ./~/@angular/core/bundles/core.umd.js 461 kB {0} [built]
[3] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
[4] ./~/rxjs/util/root.js 470 bytes {0} [built]
[5] ./~/rxjs/Subject.js 5.33 kB {0} [built]
[6] ./~/rxjs/Observable.js 5.17 kB {0} [built]
[7] ./~/rxjs/util/toSubscriber.js 764 bytes {0} [built]
[8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
[9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
[10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
[11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
[12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
[13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
[14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
[15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
[16] ./~/rxjs/Observer.js 193 bytes {0} [built]
[17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
[18] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
[19] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
[20] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js 4.68 kB {0} [built]
[21] ./~/@angular/compiler/bundles/compiler-testing.umd.js 24.1 kB {0} [built]
[22] ./~/@angular/compiler/bundles/compiler.umd.js 1.18 MB {0} [built]
[23] ./~/@angular/platform-browser/bundles/platform-browser-testing.umd.js 7.91 kB {0} [built]
[24] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 170 kB {0} [built]
[25] ./~/@angular/common/bundles/common.umd.js 137 kB {0} [built]
[26] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 7.03 kB {0} [built]
[27] ./src/javascripts/moda-ng2 \.spec\.ts 198 bytes {0} [built]
[28] ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 1.65 kB {0} [optional] [built] [1 error]
**ERROR in ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./banner.component in /home/denimuser/Documents/maya/src/javascripts/moda-ng2/src/app/services
@ ./src/javascripts/moda-ng2/src/app/services/banner.spec.ts 4:25-54
webpack: Failed to compile.**
在./src ERROR /javascripts/moda-ng2/src/app/services/banner.spec.ts 未找到模块：错误：无法解析'文件'或'直接tory'./banner.component in/home/denimuser/Documents/maya/src/javascripts/moda-ng2/src/app/services @ ./src/javascripts/moda-ng2/src/app/services/banner。 spec.ts 4：25-54 webpack：无法编译。
但是，尽管这个测试运行 - simple.spec.ts
import {} from 'jasmine';
describe('Meaningful Test',() => {
it('1 + 1 => 2',() => {
expect(1 + 1).toBe(2);
});
});
所以这种说法import { BannerComponent } from './banner.component';在banner.spec.ts无法加载 “BannerComponent”
什么我做错了吗？请帮助:)
抱歉没有找到你。你能告诉我什么和在哪里添加它？ – Ajey
我不知道你的项目结构，但是在'files'下面的'karma.conf.js'中只需添加'{pattern：appSrcBase +'**/*。ts'，包括：false，watched：false}，'你只是在你的文件中评论这个。请取消评论并尝试。 –
resolve.extensions丢失了！ – Ajey