不幸的是，我无法让 Jest 工作。我想用它为我的 Angular webapp 构建单元测试。我刚刚注意到以下帖子，但对我没有任何帮助:Error: Uncaught (in promise): Failed to load login.component.html
当我运行 jest 时收到以下错误消息:
PASS src/app/services/config.service.spec.ts
FAIL src/app/footer/footer.component.spec.ts
● Console
console.error node_modules/jest-environment-jsdom-thirteen/node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Error: Invalid protocol: c:
at Object.dispatchError (C:\Users\Da\workspace\test-login\node_modules\jest-environment-jsdom-thirteen\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:60:19)
at EventEmitter.client.on.err (C:\Users\Da\workspace\test-login\node_modules\jest-environment-jsdom-thirteen\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:674:20)
at EventEmitter.emit (events.js:194:15)
at process.nextTick (C:\Users\Da\workspace\test-login\node_modules\jest-environment-jsdom-thirteen\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:315:37)
at process._tickCallback (internal/process/next_tick.js:61:11) undefined
● FooterComponent › Test2
Uncaught (in promise): Failed to load C:footer.component.html
at resolvePromise (node_modules/zone.js/dist/zone.js:852:31)
at resolvePromise (node_modules/zone.js/dist/zone.js:809:17)
at node_modules/zone.js/dist/zone.js:913:17
at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:423:31)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (node_modules/zone.js/dist/async-test.js:90:25)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/dist/proxy.js:157:39)
at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:422:60)
at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/dist/zone.js:195:47)
at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:601:35)
at ZoneTask.Object.<anonymous>.ZoneTask.invokeTask [as invoke] (node_modules/zone.js/dist/zone.js:502:21)
at invokeTask (node_modules/zone.js/dist/zone.js:1693:14)
at XMLHttpRequest.globalZoneAwareCallback (node_modules/zone.js/dist/zone.js:1719:17)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 3.734s
Ran all test suites.
npm ERR! Test failed. See above for more details.
页脚.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents().then(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
});
}));
test('Test2', () => {
const names = ['a,', 'b', 'c'];
expect(names).toContain('c');
expect(component.sum()).toBe('test');
});
});
页脚.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
sum() {
return 'test';
}
}
包.json
{
"name": "test-login",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "jest",
"test:watch": "jest --watch",
"test:cc": "jest --coverage",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.15",
"@angular/common": "~7.2.15",
"@angular/compiler": "~7.2.15",
"@angular/core": "^7.2.15",
"@angular/forms": "^7.2.15",
"@angular/platform-browser": "^7.2.15",
"@angular/platform-browser-dynamic": "~7.2.15",
"@angular/router": "~7.2.15",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-typescript": "^7.3.3",
"@ng-bootstrap/ng-bootstrap": "^4.1.3",
"angular-font-awesome": "^3.1.2",
"angular2-cookie": "^1.2.6",
"babel-jest": "^24.8.0",
"bootstrap": "^4.3.1",
"core-js": "^3.1.1",
"cosmiconfig": "^5.2.1",
"font-awesome": "^4.7.0",
"idb": "^4.0.3",
"inversify": "^5.0.1",
"jest-cli": "^24.8.0",
"jquery": "^3.4.1",
"ngx-cookie-service": "^2.2.0",
"ngx-indexed-db": "^2.0.8",
"popper.js": "^1.15.0",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.5.2",
"tslib": "^1.9.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-builders/jest": "^7.4.2",
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.15",
"@angular/language-service": "~7.2.15",
"@types/jasminewd2": "~2.0.6",
"@types/jest": "^24.0.13",
"@types/node": "~12.0.2",
"codelyzer": "~5.0.1",
"cypress": "^3.3.0",
"cypress-cucumber-preprocessor": "^1.11.2",
"jest": "^24.8.0",
"jest-preset-angular": "^7.1.1",
"node-sass": "^4.12.0",
"protractor": "~5.4.2",
"ts-jest": "^24.0.2",
"ts-node": "~8.1.0",
"tslint": "~5.16.0",
"typescript": "^3.4.5"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
},
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/src/setupJest.ts"
],
"globals": {
"ts-jest": {
"diagnostics": false
}
}
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"importHelpers": true,
"target": "es5",
"types": ["cypress", "node", "jest"],
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
最佳答案
您覆盖了 package.json 中的 globals.ts-jest 部分，但仅将其替换为部分配置。添加 astTransformers(以及其他原始设置)，如 jest-preset-angular README.md 中所述.
关于Angular + Jest : Error: Uncaught (in promise): Failed to load C:footer. component.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56240682/