Angular 4组件单元测试报错：No provider for Http及Spy对象缺失

Hey there, let's work through those two errors you're facing in your Angular 4 component unit tests—they're common pitfalls, so we can fix them easily!

1. Fixing Error: No provider for http! #

Angular throws this error when your component (or a service it depends on) uses the Http service, but your test module hasn't set up a provider for it. You don't want to make real HTTP calls in unit tests, so use Angular's built-in testing utilities:

• Recommended: Import HttpTestingModule from @angular/http/testing into your test's configureTestingModule imports. This sets up a mock HTTP client that won't hit real endpoints:

  TestBed.configureTestingModule({
    imports: [HttpTestingModule],
    declarations: [YourComponent],
    providers: [/* any other services your component needs */]
  });
  

• Alternative: If you want a fully custom mock, create a spy object and provide it manually:

  providers: [
    { provide: Http, useValue: jasmine.createSpyObj('Http', ['get', 'post', 'put']) }
  ]
  

2. Fixing Failed: could not find an object to spy upon for filexGeneralData() #

This error means you're trying to spy on the filexGeneralData() method, but Jasmine can't find the object that owns this method. Here's how to fix it:

• If it's a component method: Make sure you're accessing the component instance first, then spy on the method before triggering component initialization (like calling fixture.detectChanges()):

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // Spy on the component method here
    spyOn(component, 'filexGeneralData');
    // Now trigger initialization
    fixture.detectChanges();
  });
  

• If it's a service method: First get the instance of the service from the test bed, then spy on its method:

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    const yourService = TestBed.get(YourService); // Angular 4 uses TestBed.get() instead of inject()
    // Spy on the service method
    spyOn(yourService, 'filexGeneralData').and.returnValue(/* return mock data, e.g., Observable.of({}) */);
    fixture.detectChanges();
  });
  

  Pro tip: If the method gets called during ngOnInit, you must set up the spy before calling fixture.detectChanges()—otherwise the method runs before Jasmine can spy on it.

Quick Example Spec File #

Here's a condensed version of what your fixed spec might look like:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpTestingModule } from '@angular/http/testing';
import { YourComponent } from './your.component';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let dataService: DataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpTestingModule],
      declarations: [YourComponent],
      providers: [DataService]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    dataService = TestBed.get(DataService);

    // Spy on the service method that was causing issues
    spyOn(dataService, 'filexGeneralData').and.returnValue(Observable.of({ mockData: 'test' }));

    // Initialize the component
    fixture.detectChanges();
  });

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

  it('should call filexGeneralData on initialization', () => {
    expect(dataService.filexGeneralData).toHaveBeenCalled();
  });
});

If you're still stuck after trying these steps, feel free to share snippets of your actual spec file—we can tweak this further!

内容的提问来源于stack exchange，提问作者deleting