带有@Host参数的单元测试Angular 9组件无法解析参数

Question

这个规范给了我一个

“错误：无法解析 FooComponent 的所有参数：(?)。”

错误，我不明白为什么。对此的任何帮助将不胜感激。

foo.component.ts

import {Component, Host } from '@angular/core';
import {BarComponent} from './bar.component';

@Component({
    selector: 'foo',
    template: `<div>foo</div>`
})
export class FooComponent {
    constructor(@Host() private barComponent: BarComponent) {
        // do something with bar
    }
}

bar.comonent.ts

import {Component, Injectable} from '@angular/core';

@Component({
    selector: 'bar',
    template: `<div>bar<foo/></div>`
})
@Injectable()
export class BarComponent { }

foo.component.spec.ts

import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import {FooComponent} from './foo.component';
import {BarComponent} from './bar.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                FooComponent,
            ],
            providers: [
                BarComponent
            ],
        });
    }));

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

    it('should compile', () => {
        expect(component).toBeTruthy();
    });
});

Answer 1

也许 configureTestingModule 的 overrideComponent 方法会有所帮助：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        FooComponent,
      ]
    }).overrideComponent(FooComponent, {
      add: {
        providers: [
          { provide: BarComponent }
        ]
      }
    });
  }));