使用Jest测试Angular组件时Mock SanityService的urlFor函数失败，求解决方案

你的Mock没生效主要有几个核心原因：

1. Jest.mock的时机错误：你在it测试块里调用jest.mock，但此时TestBed已经完成配置并创建了组件实例，这个mock不会回溯影响已经初始化的依赖。Jest的模块mock需要在测试文件顶部（或beforeAll钩子）执行，才能在模块加载阶段生效。
2. SpyOn的目标错误：你尝试spyOnSanityService.prototype，但TestBed已经创建了真实的SanityService实例并注入到组件中，这个spy不会作用到已存在的实例上。你应该针对组件实例中实际注入的服务对象进行spy。
3. 初始化顺序错误：你在beforeEach里先调用了fixture.detectChanges()，这会触发组件初始化和模板渲染，此时imageUrl方法已经被真实服务调用，之后再做mock就完全来不及了。

我们需要在组件初始化前就Mock好SanityService，确保模板调用imageUrl时使用的是Mock方法。这里提供两种可靠的实现方式：

方式一：在TestBed中直接提供Mock服务类 #

提前定义Mock服务类，在TestBed配置时替换真实服务：

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { MediaImageComponent } from './media-image.component';
import { SanityService } from '../../../services/sanity/sanity.service';
import { waypointImage } from '../../../mocks/waypoint.mocks';

// 定义Mock服务，模拟urlFor方法
class MockSanityService {
  urlFor = jest.fn(() => 'test-image-url');
}

describe('MediaImageComponent', () => {
  let fixture: ComponentFixture<MediaImageComponent>;
  let component: MediaImageComponent;
  let mockSanityService: MockSanityService;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [MediaImageComponent],
      // 用Mock类替换真实SanityService
      providers: [{ provide: SanityService, useClass: MockSanityService }],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(MediaImageComponent);
    component = fixture.componentInstance;
    // 获取注入的Mock服务实例
    mockSanityService = TestBed.inject(SanityService) as unknown as MockSanityService;
    component.mediaData = waypointImage;
    // 此时还未触发组件初始化，mock已准备完成
  }));

  it('should create and call urlFor with correct source', () => {
    // 触发组件初始化和模板渲染
    fixture.detectChanges();

    expect(component).toBeTruthy();
    // 检查组件的imageUrl方法是否被正确调用
    expect(component.imageUrl).toHaveBeenCalledWith(component.mediaData);
    // 检查Mock服务的urlFor是否收到正确参数
    expect(mockSanityService.urlFor).toHaveBeenCalledWith(component.mediaData);
  });
});

方式二：SpyOn组件注入的服务实例 #

如果不想单独定义Mock类，可以直接对TestBed注入的真实服务实例进行spy，替换其方法实现：

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { MediaImageComponent } from './media-image.component';
import { SanityService } from '../../../services/sanity/sanity.service';
import { waypointImage } from '../../../mocks/waypoint.mocks';

describe('MediaImageComponent', () => {
  let fixture: ComponentFixture<MediaImageComponent>;
  let component: MediaImageComponent;
  let sanityService: SanityService;
  let urlForSpy: jest.SpyInstance;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [MediaImageComponent],
      providers: [SanityService],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(MediaImageComponent);
    component = fixture.componentInstance;
    // 获取注入的真实服务实例
    sanityService = TestBed.inject(SanityService);
    // Spy替换urlFor方法，返回模拟值
    urlForSpy = jest.spyOn(sanityService, 'urlFor').mockReturnValue('test-image-url');
    component.mediaData = waypointImage;
  }));

  it('should create and call urlFor with correct source', () => {
    fixture.detectChanges();

    expect(component).toBeTruthy();
    expect(component.imageUrl).toHaveBeenCalledWith(component.mediaData);
    expect(urlForSpy).toHaveBeenCalledWith(component.mediaData);
  });

  // 测试后恢复原方法，避免影响其他测试用例
  afterEach(() => {
    urlForSpy.mockRestore();
  });
});

• 测试初始化顺序：fixture.detectChanges()会触发组件的ngOnInit和模板渲染，所有mock和准备工作必须在这之前完成。
• Angular依赖注入测试逻辑：TestBed创建组件时会根据配置的providers注入依赖，要替换依赖必须在TestBed.configureTestingModule阶段指定，或者在组件实例创建后对注入的实例进行spy操作。
• Jest Mock的作用范围：jest.mock()是模块级别的mock，需要在模块加载前执行（通常在文件顶部），如果在测试块内调用，不会影响已经加载的模块实例。

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