Angular + Jest: Error: Uncaught (in promise): Failed to load C:footer.component.html

Question

Unfortunately, I can't get Jest to work. I want to use it to build unit tests for my Angular webapp. I just noticed the following post, but nothing worked for me: Error: Uncaught (in promise): Failed to load login.component.html

I get the following error message when I run 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"
    ]
  }
}

Answer 1

You overrode the part globals.ts-jest in package.json, but only replaced it with a partial configuration. Add astTransformers (and other original settings as well) as described in the jest-preset-angular README.md.