ECONNREFUSED 127.0.0.1:80 - Jest + Angular failing to load css files

[parky128]

I am facing an issue where some Jest unit tests for an Angular application will not run and pass successfully in a container via AWS CodeBuild.

Output as follows:

console.error
        Error: Error: connect ECONNREFUSED 127.0.0.1:80
            at Object.dispatchError (/codebuild/output/src167250272/src/codestar-connections.us-east-1.amazonaws.com/git-http/945495183558/us-east-1/ddc6df82-2eaa-468d-84fd-061e004e812b/defender/al-magma-console/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:63:19)
            at Request.<anonymous> (/codebuild/output/src167250272/src/codestar-connections.us-east-1.amazonaws.com/git-http/945495183558/us-east-1/ddc6df82-2eaa-468d-84fd-061e004e812b/defender/al-magma-console/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:655:18)
            at Request.emit (events.js:387:35)
            at ClientRequest.<anonymous> (/codebuild/output/src167250272/src/codestar-connections.us-east-1.amazonaws.com/git-http/945495183558/us-east-1/ddc6df82-2eaa-468d-84fd-061e004e812b/defender/al-magma-console/node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:121:14)
            at ClientRequest.emit (events.js:375:28)
            at Socket.socketErrorListener (_http_client.js:475:9)
            at Socket.emit (events.js:375:28)
            at emitErrorNT (internal/streams/destroy.js:106:8)
            at emitErrorCloseNT (internal/streams/destroy.js:74:3)
            at processTicksAndRejections (internal/process/task_queues.js:82:21) undefined
    
          at VirtualConsole.<anonymous> (../../node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
          at Object.dispatchError (../../node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:66:53)
          at Request.<anonymous> (../../node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:655:18)
          at ClientRequest.<anonymous> (../../node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:121:14)
    
    FAIL console apps/console/src/app/app.component.spec.ts (14.057 s)
      AppComponent
        ✕ should create the app (311 ms)
        ✕ should have as title 'console' (234 ms)
    
      ● AppComponent › should create the app
    
        thrown: "Failed to load checkbox.css"
    
           8 |   let component: AppComponent;
           9 |   let fixture: ComponentFixture<AppComponent>;
        > 10 |   beforeEach(async () => {
             |   ^
          11 |     await TestBed.configureTestingModule({
          12 |       imports: [RouterTestingModule,NgNavigationModule],
          13 |       declarations: [AppComponent]
    
          at context.<computed> (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4347:39)
          at src/app/app.component.spec.ts:10:3
          at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
          at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
          at ../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4265:33
          at context.<computed> (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4308:39)
          at Object.<anonymous> (src/app/app.component.spec.ts:6:1)
          at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
          at runJest (../../node_modules/@jest/core/build/runJest.js:404:19)
          at _run10000 (../../node_modules/@jest/core/build/cli/index.js:320:7)
          at Object.runCLI (../../node_modules/@jest/core/build/cli/index.js:173:3)
    
      ● AppComponent › should have as title 'console'
    
        thrown: "Failed to load checkbox.css"
    
           8 |   let component: AppComponent;
           9 |   let fixture: ComponentFixture<AppComponent>;
        > 10 |   beforeEach(async () => {
             |   ^
          11 |     await TestBed.configureTestingModule({
          12 |       imports: [RouterTestingModule,NgNavigationModule],
          13 |       declarations: [AppComponent]
    
          at context.<computed> (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4347:39)
          at src/app/app.component.spec.ts:10:3
          at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
          at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
          at ../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4265:33
          at context.<computed> (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4308:39)
          at Object.<anonymous> (src/app/app.component.spec.ts:6:1)
          at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
          at runJest (../../node_modules/@jest/core/build/runJest.js:404:19)
          at _run10000 (../../node_modules/@jest/core/build/cli/index.js:320:7)
          at Object.runCLI (../../node_modules/@jest/core/build/cli/index.js:173:3)
    
    Test Suites: 1 failed, 1 total
    Tests:       2 failed, 2 total
    Snapshots:   0 total
    Time:        14.527 s
    Ran all test suites.

The spec file itself is super trivial:

describe('AppComponent', () => {
    
      let component: AppComponent;
      let fixture: ComponentFixture<AppComponent>;
      beforeEach(async () => {
        await TestBed.configureTestingModule({
          imports: [RouterTestingModule,NgNavigationModule],
          declarations: [AppComponent]
        }).compileComponents();
      });
    
      beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      })
    
      it('should create the app', () => {
        expect(component).toBeTruthy();
      });
    
      it(`should have as title 'console'`, () => {
        expect(component.title).toEqual('console');
      });
    });

Our codebase is powered by Nx, v12.9, but I dont think this is the problem.

Oddly, this component doesnt actually reference the css file in question in the error message, but we are using PrimeNG components.

I also came across this list of common problems and solutions with Angular and Jest, although its a few years old this particular comment relates to the exact same issue I am facing here, but their solution about using "postinstall": "ngcc --properties es2015 browser module main" is something we already have implemented that came out of the box with Nx when we set up our repo.

These test suites pass fine on our developer machines, and we do already have a Jenkins pipeline which uses AWS EC2 instances, and dont see these errors here either.

So I can only deduce that this seems like a possible environment issue with our container, I dont think this is anything to do with our code.

Has anyone out there come across this kind of problem and know how to resolve?

Thanks

[cetincakiroglu]

Hi,

Please use forum or discord channel for questions and help requests.

Forum: https://forum.primefaces.org/viewforum.php?f=35
Discord: https://discord.com/invite/gzKFYnpmCY

Regards