在使用 TestBed 创建模拟组件之前注入数据 - angular 中的单元测试 4

Question

I would like to inject data to DeviceMarkerComponent before running this:

let component: DeviceMarkerComponent;
let fixture: ComponentFixture<DeviceMarkerComponent>;
...

fixture = TestBed.createComponent(DeviceMarkerComponent);
component = fixture.componentInstance;

DeviceMarkerComponent uses variables in ngOnInit and I can't create the component without initializing the variables. NgOnInit is firing when TestBed.CreateComponent is called and it causes error, so I have to set these variables or modify a code which I'm testing:(

Answer 1

You need to configure the testbed before creating the component. In the configuration you can set imports, declarations, etc of what your component is using as well as pass spys.

let component: DeviceMarkerComponent;
let fixture: ComponentFixture<DeviceMarkerComponent>;

beforeEach(fakeAsync(() => {
   TestBed.configureTestingModule({
     declarations: [DeviceMarkerComponent],
     providers: [any providers the component uses]
     imports: [any imports component uses]
   }).compileComponents();
}));

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

There is also a Type alias you can use for the testbed configuration that can be helpful.
https://angular.io/api/core/testing/TestModuleMetadata

Answer 2

    let component: DeviceMarkerComponent;
    let fixture: ComponentFixture<DeviceMarkerComponent>;
    ...
    const testBed = TestBed.configureTestingModule({...});
    // do anything you want to do before createComponent
    testBed.inject(AService).init();
    testBed.compileComponents();
    fixture = TestBed.createComponent(DeviceMarkerComponent);
    component = fixture.componentInstance;

the document of inject method under the TestBedStatic class.