Angular Cypress 组件测试错误：初始化前无法访问“<Component>”

Question

我正在尝试使用 Cypress 运行我的 Angular 组件的规范。但我在 Cypress 日志中遇到以下错误：

The following error originated from your test code, not from Cypress.


  > Cannot access 'TextsFilterComponent' before initialization


When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.


We dynamically generated a new test to display this failure.
View stack trace
 Print to console
    at Module.TextsFilterComponent (http://localhost:8080/__cypress/src/spec-1.js:80491:69)
    at 36283 (webpack://angular/./src/app/shared/components/games/texts-filter/texts-filter.module.ts:12:17)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 70275 (http://localhost:8080/__cypress/src/spec-1.js:80476:78)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 44549 (http://localhost:8080/__cypress/src/spec-1.js:80241:78)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 37511 (http://localhost:8080/__cypress/src/spec-1.js:79929:69)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 67953 (http://localhost:8080/__cypress/src/spec-1.js:27564:82)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 70111 (http://localhost:8080/__cypress/src/spec-1.js:26774:74)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 12063 (http://localhost:8080/__cypress/src/spec-1.js:17404:67)
    at __webpack_require__ (http://localhost:808

我的规格如下：

import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { TranslateModule } from '@ngx-translate/core';
import { FormFieldModule } from '../form-field/form-field.module';
import { TextsFilterComponent } from './texts-filter.component';
import { TextsFilterModule } from './texts-filter.module';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import {
  ChangeDetectorRef, EventEmitter,
} from '@angular/core';
import { TextsService, SyllablesService, WordsService } from '../../../../core/services/games';
import { AuthService } from '../../../../core/services';

it('mounts', () => {
  cy.mount(TextsFilterComponent, {
    imports: [
      TextsFilterModule,
      CommonModule,
      FormFieldModule,
      FormsModule,
      ReactiveFormsModule,
      NgSelectModule,
      TranslateModule,
      MatInputModule,
      MatSelectModule,
    ],
    providers: [
      TextsService,
      ChangeDetectorRef,
      AuthService,
      WordsService,
      SyllablesService,
    ],
    componentProperties: {
      parametersForm: new FormGroup({
        test: new FormControl('x'),
      }),
      hasError: new EventEmitter(),
      customMinItems: 1,
    },
  });
});

我的规范与组件位于同一文件夹中，因此所有导入都是正确的。

我已将注入到我的组件的所有服务放在

providers

中。并将所有从模块导入到

imports

。我还在

componentProperties

部分中传递了组件的 2 个输入和 1 个输出的一些值。

组件模块：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { TranslateModule } from '@ngx-translate/core';
import { FormFieldModule } from '../form-field/form-field.module';
import { TextsFilterComponent } from './texts-filter.component';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  declarations: [TextsFilterComponent],
  exports: [TextsFilterComponent],
  imports: [
    CommonModule,
    FormFieldModule,
    FormsModule,
    ReactiveFormsModule,
    NgSelectModule,
    TranslateModule,
    MatInputModule,
    MatSelectModule,
  ],
})
export class TextsFilterModule {}

我的组件：

// ...

@Component({
  selector: 'texts-filter',
  templateUrl: './texts-filter.component.html',
  styleUrls: ['./texts-filter.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TextsFilterComponent
  extends AbstractFiltersMixin(BaseFilters)
  implements OnDestroy, AfterViewInit, OnChanges {

  constructor(
    private _textsService: TextsService,
    private _cdr: ChangeDetectorRef,
    private _authService: AuthService,
    private _wordsService: WordsService,
    private _syllablesService: SyllablesService,
  ) {
    super();
  }

  // ...
}

Answer 1

看起来像是

TextsFilterComponent

和

TextsFilterModule

之间的循环引用。

模块只有一个导出，即组件本身，因此您可能不需要它在

cy.mount()

。

模块带来的所有其他导入都已包含在您的安装中

imports

。

it('mounts', () => {
  cy.mount(TextsFilterComponent, {
    imports: [
      // TextsFilterModule,           // avoid circular mounting error 
      CommonModule,
      FormFieldModule,
      FormsModule,
      ReactiveFormsModule,
      NgSelectModule,
      TranslateModule,
      MatInputModule,
      MatSelectModule,
    ],