Jest 在 CLI 中测试运行正常，但在 IntelliJ 中失败

Question

我有一个较旧的 angular 项目，我正在更新并移动到 nx。（NX 很酷。）我根据教程创建了一个新项目，并逐渐将我的文件移动过来。

通过单元测试，nx test 运行我项目中的所有单元测试都很好，所以看起来 jest 就目前而言配置正确，但是当我运行在 IntelliJ 中，我得到：

  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)

我找到了这个，但不确定在 Jest 运行中放置笑话选项意味着什么。

我找到了更多，但没什么用。大多数人似乎在测试完成后遇到了这些错误。

看来 jest 配置最近发生了很大变化，因为我发现的许多帖子都引用了过时的文件。

更新：

一条评论建议升级到 NX 10，无论如何我都很兴奋，所以我就这么做了。现在我从 CLI 得到了与我在 IntelliJ 中完全相同的错误。进步！！！

所以我注意到所有测试几乎都无法加载相同的 html 文件，所以我现在只为该组件创建了一个测试以尝试隔离问题。这是我现在遇到的错误。

  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)

这是 HTML 文件：

<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>

单元测试：

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();
  });
});

我的组件：

@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();
    }
  }
}

请分享任何想法。

Answer 1

当我运行从https://nx.dev/angular/workspace/update升级时，我似乎错过了命令

nx migrate --run-migrations=migrations.json

所以我是运行一个不完整的升级。运行这个命令似乎已经解决了 nx test 的问题，现在 nx 10 也在使用 IntelliJ 进行了正确的测试。

生活美好！感谢您的帮助。

Answer 2

我不得不运行项目中的以下内容只是为了升级 jest 而不是玩弄 angular 版本或工作区设置

nx migrate @nrwl/jest@10.3.2 --from=@nrwl/jest@9.5.1
npm install
nx migrate --run-migrations=migrations.json

少数文件更新失败。然后手动更改以下文件

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

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

测试现在运行在 intelliJ、ng cli 和 nx cli 中正常

Jest 在 CLI 中测试运行正常，但在 IntelliJ 中失败

Jest tests run fine from CLI, but fail in IntelliJ

intellij-idea

jestjs

angular

nrwl-nx

Jest 在 CLI 中测试 运行 正常，但在 IntelliJ 中失败

Jest tests run fine from CLI, but fail in IntelliJ

intellij-idea

jestjs

angular

nrwl-nx

Jest 在 CLI 中测试运行正常，但在 IntelliJ 中失败