Jest tests run fine from CLI, but fail in IntelliJ

Question

I have an older angular project that I'm updating and moving to nx. (NX is cool.) I'm created a new project from the tutorial and am gradually moving my files over.

With unit tests, nx test runs all of the unit tests in my project just fine, so it appears jest is configured correctly as far as that goes, but when I run inside IntelliJ, I get:

  console.error
    Error: Error: connect ECONNREFUSED 127.0.0.1:80
            at Object.dispatchError (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:54:19)
        at Request.client.on.err (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:675:20)
        at Request.emit (events.js:203:15)

Error: Uncaught (in promise): Failed to load app.component.html

    at resolvePromise (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:832:39)

I found this one, but not sure what it means to place jest options in Jest Run. Run Jest test in IntelliJ IDEA

I found some more, but nothing much helpful. Most seem to be getting these errors after the test completes.

It appears that jest configuration has changed a lot recently, because many of the posts I'm finding refer to out of date files.

Update:

A comment suggested upgrading to NX 10, which I was excited to do anyway, so I did so. Now I'm getting exactly the same error from the CLI as I am in IntelliJ. PROGRESS!!!

So I've noticed that all of the test were pretty much failing to load the same html file, so I've now created a test for just that component to try to isolate the issue. Here's the error I'm getting now.

  console.error
    Error: Error: connect ECONNREFUSED 127.0.0.1:80
        at Object.dispatchError (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:54:19)
        at Request.client.on.err (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:675:20)
        at Request.emit (events.js:203:15)
        at Request.onRequestError (/home/thomas/git/heavyweight-software/node_modules/request/request.js:877:8)
        at ClientRequest.emit (events.js:198:13)
        at Socket.socketErrorListener (_http_client.js:401:9)
        at Socket.emit (events.js:198:13)
        at emitErrorNT (internal/streams/destroy.js:91:8)
        at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
        at process._tickCallback (internal/process/next_tick.js:63:19) undefined

      at VirtualConsole.on.e (../../node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at Object.dispatchError (../../node_modules/jsdom/lib/jsdom/living/xhr-utils.js:57:53)
      at Request.client.on.err (../../node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:675:20)
      at Request.onRequestError (../../node_modules/request/request.js:877:8)


Error: Uncaught (in promise): Failed to load choose-address.component.html

    at resolvePromise (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:832:39)
    at resolvePromise (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:784:21)
    at /home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:894:21
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:421:35)
    at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/async-test.js:86:33)
    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/proxy.js:145:43)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:420:40)
    at Zone.Object.<anonymous>.Zone.runTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:188:51)
    at drainMicroTaskQueue (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:601:39)
    at ZoneTask.Object.<anonymous>.ZoneTask.invokeTask [as invoke] (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:507:25)
    at invokeTask (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:1671:18)
    at XMLHttpRequest.globalZoneAwareCallback (/home/thomas/git/heavyweight-software/node_modules/zone.js/dist/zone.js:1697:21)
    at innerInvokeEventListeners (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
    at invokeEventListeners (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
    at XMLHttpRequestEventTargetImpl._dispatch (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
    at fireAnEvent (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/helpers/events.js:17:36)
    at requestErrorSteps (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:121:3)
    at Object.dispatchError (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:51:3)
    at Request.client.on.err (/home/thomas/git/heavyweight-software/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:675:20)
    at Request.emit (events.js:203:15)
    at Request.onRequestError (/home/thomas/git/heavyweight-software/node_modules/request/request.js:877:8)
    at ClientRequest.emit (events.js:198:13)
    at Socket.socketErrorListener (_http_client.js:401:9)
    at Socket.emit (events.js:198:13)
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Here is the HTML file:

<h2>Address changed by validation.</h2>
<form  [formGroup]="chooseAddressForm">
  <mat-radio-group
      aria-label="Please choose your correct address."
      *ngFor="let address of data.contactPoints; let ix = index"
      name="selectAddress"
      formControlName="selectAddress">
    <mat-radio-button value="{{ix}}">
      {{address.street1}}<br/>
      {{address.city}}, {{address.state}} {{address.postalCode}}<br/>
    </mat-radio-button>
  </mat-radio-group>
</form>

<p><span class="error">{{errorText}}</span></p>

<div class="buttonBar">
  <button mat-raised-button (click)="onButtonClick(true)">Select</button>
  <button mat-raised-button (click)="onButtonClick(false)">Cancel</button>
</div>

And the unit test:

describe('ChooseAddressComponent', () => {
  let component: ChooseAddressComponent;
  let fixture: ComponentFixture<ChooseAddressComponent>;

  const chooseAddressData: ChooseAddressDialogData = new ChooseAddressDialogData();
  const matDialogData = {};
  let mockMatDialogRef: MockMatDialogRef;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ChooseAddressComponent,
      ],
      imports: [
        BrowserAnimationsModule,
        MatButtonModule,
        MatDialogModule,
        MatFormFieldModule,
        MatIconModule,
        MatRadioModule,
      ],
      providers: [
        {provide: ChooseAddressDialogData, useValue: chooseAddressData},
        {provide: MAT_DIALOG_DATA, useValue: matDialogData},
        {provide: MatDialogRef, useClass: MockMatDialogRef},
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChooseAddressComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    mockMatDialogRef = TestBed.inject(MatDialogRef);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

And my component:

@Component({
  selector: 'heavyweight-software-app-choose-address',
  templateUrl: './choose-address.component.html',
  styleUrls: ['./choose-address.component.css']
})
export class ChooseAddressComponent implements OnInit {
  chooseAddressForm: FormGroup;
  errorText = '';

  constructor(protected dialogRef: MatDialogRef<ChooseAddressComponent>,
              @Inject(MAT_DIALOG_DATA) public data: ChooseAddressDialogData) { }

  get selectAddress(): AbstractControl { return this.chooseAddressForm.get('selectAddress'); }

  ngOnInit(): void {
    this.createForm();
  }

  private createForm() {
    this.chooseAddressForm = new FormGroup({
      selectAddress: new FormControl(null,
        [ Validators.required])
    } );

    this.selectAddress.patchValue(0);
  }

  onButtonClick(confirmed: boolean): void {
    this.errorText = '';

    if (confirmed) {
      const idx: number = this.selectAddress.value;
      if (idx) {
        this.data.selectedIndex = idx;
        this.dialogRef.close();
      } else {
        this.errorText = 'You must select your address from the list';
      }
    } else {
      this.data.selectedIndex = null;
      this.dialogRef.close();
    }
  }
}

Please share any ideas.

Answer 1

When I ran the upgrade from https://nx.dev/angular/workspace/update I seem to have missed the command

nx migrate --run-migrations=migrations.json

so I was running with an incomplete upgrade. Running this command seems to have fixed the issue with nx test and now nx 10 is testing properly with IntelliJ as well.

Life is good! Thanks for the help.

Answer 2

I had to run the following on project just to upgrade jest and not play around with angular version or workspace set up

nx migrate @nrwl/[email protected] --from=@nrwl/[email protected]
npm install
nx migrate --run-migrations=migrations.json

Few of the file update failed. Then manually changed following files

• jest.config.js
• apps/project/jest.config.js

https://github.com/nrwl/nx-examples/commit/8772ff2a6d381df029c5b98c864a75ec8c72be3f

The test are now running fine in intelliJ, ng cli & nx cli