Angular 6组件测试：Mock Service未生效，触发真实HTTP请求

你现在碰到的问题很典型——在嵌套测试块里配置了Mock Service，但Jasmine还是绕开它发起了真实的HTTP请求，导致404报错。我来帮你分析原因并给出修正方案：

问题根源 #

你的测试代码里有几个核心问题：

1. 组件实例创建太早：最外层的beforeEach就已经创建了FormComponent实例，这时候嵌套块里的Mock Service还没配置，组件已经注入了真实的FormService，后续的Mock配置对已存在的组件实例完全无效。
2. 重置TestBed后未重建组件：嵌套块里重置了TestBed并配置了Mock，但没有重新创建组件，组件还是抱着之前的真实服务不放。
3. 引入了真实的HttpClientModule：最外层测试模块里加了HttpClientModule，这会让Angular启用真实HTTP客户端，哪怕Mock了服务，也可能因为配置疏漏触发真实请求。

修正步骤 #

1. 延迟组件实例创建：把组件实例化的逻辑从最外层移到每个测试块（或嵌套块的beforeEach），确保每次测试都用最新配置的TestBed。
2. 嵌套块里重新配置+重建组件：重置TestBed后，不仅要配置Mock Service，还要重新编译组件并创建新的实例。
3. 替换为测试用HTTP模块：用HttpClientTestingModule替代HttpClientModule，彻底避免真实HTTP请求的触发。

修正后的完整测试代码 #

// Core imports
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ActivatedRoute, Params } from "@angular/router";
import { Observable } from "rxjs/Observable"
import 'rxjs/add/observable/of';
// 替换为测试专用的HTTP模块，避免真实请求
import { HttpClientTestingModule } from "@angular/common/http/testing"; 

// Vendor imports
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

// Project imports
import { FormComponent } from './form.component';
import { FormService } from "../../services/form.service";
import { DatastoreService } from "../../services/datastore.service";

describe('FormComponent', () => {
  let component: FormComponent;
  let fixture: ComponentFixture<FormComponent>;
  let de: DebugElement;
  let el;

  // 封装基础模块配置，方便复用和扩展
  const setupTestModule = (extraProviders = []) => {
    return TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, FormsModule, ToastrModule.forRoot(), NgbModule.forRoot()],
      providers: [
        ToastrService,
        DatastoreService,
        { 
          provide: ActivatedRoute, 
          useValue: { 
            params: { subscribe: (fn: (value: Params) => void) => fn({ tab: 0 }) }, 
            snapshot: { 
              url: [{path: 'worker'}], 
              queryParams: {table: 'portal', sysId: undefined} 
            }
          }
        },
        ...extraProviders // 传入自定义的providers（比如Mock服务）
      ],
      declarations: [ FormComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
  };

  beforeEach(async(() => {
    console.info('Initial module setup');
    await setupTestModule();
  }));

  beforeEach(() => {
    console.info('Creating base component instance');
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    de = fixture.debugElement;
    el = de.nativeElement;
  });

  describe('with a form layout containing an invalid element', () => {
    // 定义Mock Service
    class FormServiceMock {
      constructor() {
        console.info('Mock FormService instantiated');
      }
      getForm(table: string) {
        console.log('Mock getForm called with table:', table);
        return Observable.of({ 
          "table": "portalx", 
          "schema": { 
            "name": {"title": "name", "element_type": "string"}, 
            "suffix": {"title": "suffix", "element_type": "string"}, 
            "active": {"title": "active", "element_type": "boolean"} 
          }, 
          "layout": ["name", "suffix", "notexists", "active"] 
        });
      }
    };

    beforeEach(async(() => {
      console.info('Setting up module with Mock FormService');
      TestBed.resetTestingModule();
      // 配置Mock服务并重新初始化模块
      await setupTestModule([{ provide: FormService, useClass: FormServiceMock }]);
    }));

    beforeEach(() => {
      // 重新创建组件实例，确保注入Mock服务
      console.info('Creating component with Mock Service');
      fixture = TestBed.createComponent(FormComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      de = fixture.debugElement;
      el = de.nativeElement;
    });

    fit('ngOnInit sets values correctly', inject([FormService], (service: FormService) => {
      console.info('Running test: ngOnInit sets values correctly');
      // 验证Mock服务被调用
      spyOn(service, 'getForm').and.callThrough();
      
      component.ngOnInit();
      
      expect(component.portal).toEqual('worker');
      // 额外验证Mock方法是否被正确调用
      expect(service.getForm).toHaveBeenCalledWith('portal');
    }));
  });
});

关键修改说明 #

• 封装了setupTestModule函数，让基础配置和自定义配置复用更清晰，避免重复代码。
• 嵌套测试块里重置TestBed后，重新配置Mock服务并重新创建组件实例，确保组件使用的是最新注入的Mock服务。
• 用HttpClientTestingModule替换HttpClientModule，彻底杜绝真实HTTP请求的触发。
• 添加了对Mock方法调用的验证，确保Mock确实在工作，方便排查问题。

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