Jest 单元测试中的 Angular 循环依赖问题

Question

我有以下 Angular 组件。它们在我的应用程序中编译并运行良好。但是，当我将模块包含在我的 Jest 测试中时，出现错误。我不知道这是否是 typescript 配置、Angular、Jest 或组合的问题。

组件:

@Component({
  selector: 'child-component',
  template: '<div>Child here.</div>'
})
export class ChildComponent {
  constructor( @Inject(forwardRef(() => ParentComponent)) private 
parentComponent: ParentComponent ) { }
}

@Component({
  selector: 'parent-component',
  template: '<div>
    <child-component></child-component>
    <child-component></child-component>
  </div>'
})
export class ParentComponent{
  @ViewChildren(ChildComponent) _children: QueryList<ChildComponent>;
}

const EXPORTED_DECLARATIONS = [
  ChildComponent,
  ParentComponent
];

@NgModule({
  exports: [EXPORTED_DECLARATIONS],
  declarations: [EXPORTED_DECLARATIONS]
})
export class TestingModule { }

如您所见，存在循环依赖。但是，它应该用 @Inject(forwardRef(() => ParentComponent)) 修复，但这不起作用。

规范:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TestingModule } from './test';
import { Component, forwardRef } from '@angular/core';

describe( 'TestComponent', () => {

  let component: TestTestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
      imports: [
        TestingModule
      ]
    });

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  } );

  it( 'default', () => {
    expect( fixture ).toMatchSnapshot();
  });

});

@Component({
  selector: 'test-test-1234',
  template: `<parent-component></parent-component>`
})
class TestComponent { }

当我运行单元测试时出现以下错误。

ReferenceError: ParentComponent 未定义

我想补充一点，如果我对 Jasmine/Karma 做同样的事情，我就不会收到这个错误。

Answer 1

当我将这两个组件分离到单独的文件中时，问题就解决了。