我有一堆业力测试设置并且与Karma一起工作正常，但我尝试添加一个新的测试组件中有下划线的组件，但是当Karma测试运行时我得到错误404：/基数/下划线，我不知道为什么。我已将下划线库放入文件数组中，但这似乎没有任何区别。
这是正在测试的组件。您可以看到它是importint *，因为_来自＆＃39;下划线＆＃39;在顶部。
import { Component, OnInit, Input } from '@angular/core';
import * as _ from 'underscore';
import { PlanPeriodService, IPlanPeriodService } from '../../planPeriod/planPeriod.service';
import { PlanPeriod } from '../../planperiod/planPeriod.model';
import { PlanningBrokerService, IPlanningBrokerService } from '../../planningBroker/planningBroker.service';
import { PlanningBroker } from '../../planningBroker/planningBroker.model';
import { PlanningCustomerService, IPlanningCustomerService } from '../../planningCustomer/planningCustomer.service';
import { PlanningCustomer } from '../../planningCustomer/planningCustomer.model';
import { ShipToService, IShipToService } from '../../shipTo/shipTo.service';
import { ShipTo } from '../../shipTo/shipTo.model';
@Component({
selector: 'chargeTo',
templateUrl: './chargeTo.component.html',
providers: [PlanPeriodService, PlanningBrokerService, PlanningCustomerService, ShipToService]
})
export class ChargeToComponent implements OnInit {
private tradeSystemId: number;
@Input() get TradeSystemId(): number {
return this.tradeSystemId;
}
set TradeSystemId(value: number) {
this.tradeSystemId = value;
this.loadPlanPeriods();
this.loadPlanningBrokers();
}
private planPeriodId: number;
@Input() get PlanPeriodId(): number {
return this.planPeriodId;
}
set PlanPeriodId(value: number) {
this.planPeriodId = value;
const item = _.find(this.PlanPeriods, (pp: PlanPeriod) => {
return pp.Id === value;
});
if (item) this.PlanPeriod = item.Description;
}
private planPeriodIds: number[];
@Input() get PlanPeriodIds(): number[] {
return this.planPeriodIds;
}
set PlanPeriodIds(value: number[]) {
this.planPeriodIds = value;
const items = _.filter(this.PlanPeriods, (pp: PlanPeriod) => {
var found = _.find(value, (n: number) => {
return n === pp.Id;
});
return found !== undefined;
});
if (items.length === 0) {
this.PlanPeriod = undefined;
}
else if (items.length === 1) {
this.PlanPeriod = items[0].Description;
} else {
this.PlanPeriod = 'Multiple Periods';
}
}
allowMultiplePlanPeriods: boolean;
@Input() get AllowMultiplePlanPeriods(): boolean {
return this.allowMultiplePlanPeriods;
}
set AllowMultiplePlanPeriods(value: boolean) {
this.allowMultiplePlanPeriods = value;
if (value) {
this.PlanPeriodId = undefined;
this.PlanPeriodIds = [];
} else {
this.PlanPeriodId = undefined;
this.PlanPeriodIds = undefined;
}
}
private planningBrokerId: number;
@Input() get PlanningBrokerId(): number {
return this.planningBrokerId;
}
set PlanningBrokerId(value: number) {
this.planningBrokerId = value;
this.loadPlanningCustomers();
const item = _.find(this.PlanningBrokers, (pb: PlanningBroker) => {
return pb.Id === value;
});
if (item) this.PlanningBroker = item.Name;
}
private planningCustomerId: number;
@Input() get PlanningCustomerId(): number {
return this.planningCustomerId;
}
set PlanningCustomerId(value: number) {
this.planningCustomerId = value;
this.loadPlanningCustomerCompany();
const item = _.find(this.PlanningCustomers, (pc: PlanningCustomer) => {
return pc.Id === value;
});
if (item) this.PlanningCustomer = item.Name;
}
@Input() PlanPeriod: string;
@Input() PlanningBroker: string;
@Input() PlanningCustomer: string;
Company: number;
PlanPeriods: PlanPeriod[];
PlanningBrokers: PlanningBroker[];
PlanningCustomers: PlanningCustomer[];
loadPlanPeriods(): void {
this.PlanPeriods = [];
this.planPeriodService.getByTradeSystem(this.TradeSystemId)
.subscribe((results: PlanPeriod[]) => this.PlanPeriods = results,
error => console.error(error));
}
loadPlanningBrokers(): void {
this.PlanningBrokers = [];
this.planningBrokerService.getByTradeSystem(this.TradeSystemId, undefined)
.subscribe((results: PlanningBroker[]) => this.PlanningBrokers = results,
error => console.error(error));
}
loadPlanningCustomers(): void {
this.PlanningCustomers = [];
this.planningCustomerService.getByPlanningBroker(this.PlanningBrokerId, this.TradeSystemId)
.subscribe((results: PlanningCustomer[]) => this.PlanningCustomers = results,
error => console.error(error));
}
loadPlanningCustomerCompany(): void {
this.Company = undefined;
this.shipToService.getById(this.planningCustomerId)
.subscribe((result: ShipTo) => this.Company = result.Company,
error => console.error(error));
}
constructor(private readonly planPeriodService: IPlanPeriodService, private readonly planningBrokerService: IPlanningBrokerService,
private readonly planningCustomerService: IPlanningCustomerService, private readonly shipToService: IShipToService) { }
ngOnInit(): any {
this.PlanPeriods = [];
}
}
这是karma.conf.js文件。你可以在这个文件数组的中间看到那里列出了下划线。
module.exports = function (config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'app/'; // app source TS files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'testing/'; // transpiled test JS and map files
var testingSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-htmlfile-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.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',
//underscore
{ pattern: 'node_modules/underscore/underscore.js', included: true, watched: false },
// 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', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.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: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false }
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": appAssets
},
exclude: [],
preprocessors: {},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
}
当我用Karma开始测试时，我得到了错误
WARN [web-server]: 404: /base/underscore
答案 0 :(得分：0)
我需要在karma-test-shim.js文件中添加到map数组中。它成功地将它添加到Karma中，但是当它从'下划线'中输入_作为_时;更改为require（'下划线'）的行，它找不到刚才叫做下划线的东西，所以我不得不将下划线映射到JS路径。这就是我在下面所做的。唯一的区别在于我开始使用lodash而不是下划线，但是相同的主体。
System.config({
baseURL: 'base',
// Extend usual application package list with test folder
packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
'lodash': 'npm:lodash/lodash.min.js'
},
});