angular - Angular 5 单元测试：“无法读取注入器中未定义的属性‘get’”

Question

我正在使用 Karma-Jasmines 为您的 Web 应用程序编写单元测试 Angular 5。我使用 Injector 来注入服务。

1. 创建 InjectableObject 方法：

   import { Injector } from '@angular/core';
   let appInjectorRef: Injector;
   export const InjectableObject = (injector?: Injector): Injector => {
      if (injector) {
         appInjectorRef = injector;
     }
     return appInjectorRef;
   };
   

2. 创建 BaseComponent 类：

   import { InjectableObject } from './injectableobject.base';
   import { MyDataService} from '../services/mydata.service';
   
   interface IBaseComponentOptions {
       hotkey?: boolean;
       tableName?: string
   }
   
   export class BaseComponent implements OnInit, OnDestroy, AfterContentInit{
       constructor(private opt?: IBaseComponentOptions) {
          const _injector = InjectableObject();
   
          this._myDataService = _injector.get(MyDataService);
       }
   }
   

3. 创建一个从 BaseComponent 扩展的组件：

   @Component({
       selector: 'app-header',
       templateUrl: './header.component.html',
       styleUrls: ['./header.component.scss']
   })
   export class HeaderComponent extends BaseComponent implements OnInit {
       constructor(
           private dataService: MyDataService,
       ){super()}
   }
   

4. 创建文件单元测试： import { MessageService } from ''; 从''导入{ HeaderComponent }；

   describe('HeaderComponent', () => {
      let component: HeaderComponent;
      let fixture: ComponentFixture<HeaderComponent>;
      let backend: MockBackend;
      beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [HeaderComponent],
             provides: [MyDataService]
         })
      }).compileComponents();
   
      beforeEach(() => {
         fixture = TestBed.createComponent(HeaderComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
      });
   
      it('should create', () => {
          expect(component).toBeTruthy();
      });
   });
   

但是当我运行测试时，我得到了这个：

TypeError：无法读取未定义的属性“获取”

在“this._myDataService = _injector.get(MyDataService);” 在基本组件中。

我不知道编写单元测试来通过这种情况。请大家帮帮我！谢谢大家！

标签： angularunit-testing

Answer 1

它与异步调用有关......

用 fakeAsync 调用包装那个测试用例....

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

然后从@angular/core/testing