Question

在AutoReceptionistRecommendation.component.ts

中

我有一个看起来像这样的ngOninit方法：

  ngOnInit() {
    this.city = this.employee.getEmpData().city;
  }

在测试文件AutoReceptionistRecommendation.component.spec.ts

中

我的代码如下：

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AutoReceptionistRecommendationComponent ],
      imports: [
        FormsModule,
        MatCardModule,
        MatIconModule,
        HttpModule
      ],
      providers: [
        EmployeeService,
        EmployeeHttpService
      ]
    })
    .compileComponents();
  }));

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

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

当我运行测试时，我得到一个如下所示的错误：

Uncaught NetworkError：无法在'XMLHttpRequest'上执行'send'：无法加载 'NG：///DynamicTestModule/AutoReceptionistRecommendationComponent_Host.ngfactory.js'

如果我删除NgOnInit中的行，则不会发生此错误，并继续测试。我认为我必须以某种方式嘲笑这项服务才能让测试通过。最好的方法是什么，有人可以提供解释如何执行此操作的文档吗？或者让我深入了解为什么ngOninit中的行发生此错误，并且当它不存在时不会发生？

Answer 1

高效的单元测试需要将当前测试的单元与其他运动部件隔离。

不应在单元测试中使用Real HttpModule。在测试直接使用MockBackend 的单位时，应使用Http模拟请求。否则这些单位应该被嘲笑，如：

providers: [
  ...
  { provide: EmployeeService, useValue: jasmine.createSpyObj('', ['getEmpData']) }
]

在第一次ngOnInit调用时调用组件detectChanges。这意味着事先应该嘲笑employee.getEmpData：

component = fixture.componentInstance;
employee.getEmpData.and.returnValue({ city: ... });
fixture.detectChanges();

如何在正在测试的组件的OnInit中调用的测试文件中模拟服务？

1 个答案: