Jest test succeed with error printed to console

Question

I'm trying to use jest with an Angular project created by @nrwl/nx. I have followed this article to convert my app from using karma to jest.

The issue I'm getting is that even though my tests are passing, for some reason the following error shows in the console:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Error: connect ECONNREFUSED 127.0.0.1:80
    at Object.dispatchError (\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:65:19)
    at Request.client.on.err (\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:676:20)
    at Request.emit (events.js:187:15)
    at Request.onRequestError (\node_modules\request\request.js:881:8)
    at ClientRequest.emit (events.js:182:13)
    at Socket.socketErrorListener (_http_client.js:391:9)
    at Socket.emit (events.js:182:13)
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19) undefined

I have only one test, which is:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

import { CommonUtilsModule } from '@lib/common-utils';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, CommonUtilsModule],
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

For some reason if I take the following line out, the console error does not show:

const fixture = TestBed.createComponent(AppComponent);

I've been looking at the error for hours now, but can't seem to figure out what's causing it. I'm not doing any http request in my test or component, so no idea why it's saying ECONNREFUSED.

Anyone had this error before?

Thanks

Clue

Answer 1

This message is common when you try to make a request to a localhost service which is not available.

Lets consider I am running a script which consumes my node.js service which is being executed under localhost:80. If my node instance is not running I would receive a message like yours.

What I believe is happening is that you have setup the port to check on 80, which is usually more common the default one to be 8080.

Housekeeper

Thanks for your answer. I'm not setting any port. All I did was run ng test. Not sure what request it is trying to make though anyway. – Clue

No worries. I understand your point, but knowing the source of the error could help you to track the issue. It could be even an extra script you are executing because the file is under the test folder. Do you have the test spect file and the line where the error is being triggered? – Housekeeper

Answer 2

As stated on angular.io about compileComponents:

Compile the testing module asynchronously after you've finished configuring it. You must call this method if any of the testing module components have a templateUrl or styleUrls because fetching component template and style files is necessarily asynchronous. See above.

After calling compileComponents, the TestBed configuration is frozen for the duration of the current spec.

So Jasmine & Angular natively use fetch to get the HTML, and compileComponents has to be called to make these HTML files accessible.

I am not sure why this is necessary, but JSDOM is clearly not able to handle this.

I recommend you using the package jest-preset-angular which takes care of handling this issue using custom processors.

Make sure you follow the setup instructions in their README.md, as the setup is kind of shaky at the time of the writing of this comment, and do not modify the jest config too much. ts-jest is going through a rewrite and the preset has not caught up to the newest version. I highly recommend you to only install jest and the preset via npm to not have an incompatible version of ts-jest in you workspace. This is critical, as ts-jest does not follow semantic versioning.

Another thing to note is that breakpoints will only work if you run jest with --runInBand/-i. If you run --watch, running in band will not work, and breakpoints will only hit, if you test just a single file (which you can achieve using a filename regex pattern). Multiple files would be tested in multiple processes, which I guess are not running in inspect-mode and vscode/your favourite debugger cannot connect to.

Bashaw