Angular + Jest：错误：未捕获（承诺）：无法加载 C:footer.component.html

Posted 2023-03-08

【中文标题】Angular + Jest：错误：未捕获（承诺）：无法加载 C:footer.component.html

【英文标题】：Angular + Jest: Error: Uncaught (in promise): Failed to load C:footer.component.html

【发布时间】：2019-10-07 23:44:46

【问题描述】：

很遗憾，我无法让 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.

footer.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');
  );

);

footer.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';
  

package.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"
    ]
  

【参考方案1】：

您覆盖了package.json 中的globals.ts-jest 部分，但仅将其替换为部分配置。按照jest-preset-angular README.md 中的说明添加astTransformers（以及其他原始设置）。