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

组件模块代码 #

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

  // ...
}

Cypress支持文件代码 #

import { mount } from 'cypress/angular'


declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

解决方案 #

1. 移除测试中重复导入的组件模块 #

测试代码中同时挂载TextsFilterComponent并导入其所属的TextsFilterModule，会导致组件被重复声明，触发初始化顺序冲突。修改测试代码，移除imports数组中的TextsFilterModule：

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

2. 移除手动添加的ChangeDetectorRef提供者 #

ChangeDetectorRef是Angular框架自动注入的依赖，不需要手动添加到providers数组中，手动添加会导致注入冲突，直接从providers中移除即可。

3. 检查组件继承的基类/Mixin引用顺序 #

组件继承了AbstractFiltersMixin(BaseFilters)，确保AbstractFiltersMixin和BaseFilters的导入顺序正确，没有循环引用或未提前声明的情况。如果Mixin或基类的定义在组件之后，调整导入顺序或确保它们被正确初始化。

内容的提问来源于stack exchange，提问作者Amphyx