小编orl*_*lly的帖子

我想为组件创建测试来检查是否显示 mat-error。

我已经创建了一个测试，但它失败了，因为 DOM 在测试过程中根本没有 mat-error 。尽管在项目提供服务时它工作得很好。

模板片段

<mat-error>
    Error message
</mat-error>

测试设置

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatFormFieldModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        BrowserAnimationsModule
      ],
      declarations: [MyComponent]
    }).compileComponents();
  }));

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

  fit('should display error', () => {
    const matErrorEl: HTMLElement = 
    fixture.debugElement.query(By.directive(MatError)).nativeElement;
    expect(matErrorEl).toBeTruthy();
  });
});

我在 VSCode 中使用 WSL 和远程 WSL 扩展开发了一个项目。它工作得很好，直到我尝试使用 Parcel-Bundler 构建（通过热重载）项目的前端。在 VSCode 中，我收到一条消息“无法重新连接。请重新加载窗口”。重新加载窗口后，我不会收到任何错误，并且每次进行任何更改时都会成功重新构建项目。但是当我重新运行命令来构建项目时，它再次发生。