It's been a struggle getting Jest to function properly. My goal is to utilize it for creating unit tests for my Angular webapp. I came across this post, but unfortunately, none of the solutions provided worked for me: Error: Uncaught (in promise): Failed to load login.component.html
Every time I attempt to run jest, I encounter the following error:
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)
...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)
...more details...
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",
...all package.json content...
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
...all tsconfig compiler options...
}
}