【发布时间】：2020-10-25 02:57:20
【问题描述】：
我有一个较旧的 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 Run 中放置 jest 选项意味着什么。 Run Jest test in IntelliJ IDEA
我发现了更多，但没什么帮助。大多数人似乎在测试完成后遇到这些错误。
最近 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();
}
}
}
请分享任何想法。
【问题讨论】：
-
为了以与
nx test相同的方式运行测试，IDE 应配置相同的 Jest 配置和选项，后者显示在您链接的问题中。如果您不确定，请不要指定任何选项。该错误出现在测试之外并且不会使它们失败，这很可能也发生在nx test中，但您没有注意到它。该错误意味着应用程序执行了真正的请求，这在测试中是不鼓励的。 -
哦，我没有考虑运行配置。我将运行配置、Jest Options 设置为 --env=jsdom 并重新运行。错误没有变化。
-
问题可能与github.com/thymikee/jest-preset-angular/issues/217和github.com/nrwl/nx/issues/1059有关。检查建议的解决方案。如果你不使用最新的 Jest 版本，你可以从更新它开始。
-
@EstusFlask 这是一篇更早的帖子（2018 年）的示例，我发现谁的配置信息非常过时。在最终发布到这里之前，我经历了其中的一些。
-
@Thom 你可以试试 Nx 10 吗？我们上周刚刚发布了它，它应该完全支持在 Webstorm 中运行 Jest 测试
标签： angular intellij-idea jestjs nrwl-nx