我很难用杰斯特测试Angular 组件。
我有这个组件：

• 媒体图像.组件.ts*

import { Component, Input } from '@angular/core'
import { SanityService } from '@services/sanity/sanity.service'
import Waypoint from '@interfaces/waypoint'

@Component({
  selector: 'app-media-image',
  templateUrl: './media-image.component.html',
  styleUrls: ['./media-image.component.scss']
})
export class MediaImageComponent {
  @Input() mediaData: Waypoint = null

  constructor(private _sanity: SanityService) {}

  imageUrl(source: any) {
    return this._sanity.urlFor(source)
  }
}

在模板中调用imageUrl
此组件需要SanityService

• 健全性.服务.ts*

import { Injectable } from '@angular/core'
import { environment } from '@environments/environment'
import imageUrlBuilder from '@sanity/image-url'
import sanityClient from '@sanity/client'

@Injectable({
  providedIn: 'root'
})
export class SanityService {
  sanityClientCredentials = {
    option: sanityClient({
      projectId: environment.sanity.projectId,
      dataset: environment.sanity.dataset,
      apiVersion: environment.sanity.apiVersion
    })
  }

  urlFor(source: any) {
    return imageUrlBuilder(this.sanityClientCredentials.option).image(source).url()
  }

}

我想模拟服务的urlFor函数，只是为了检查它是否用正确的参数调用。
以下是我的尝试：

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'

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

      fixture = TestBed.createComponent(MediaImageComponent)
      component = fixture.componentInstance
      component.mediaData = waypointImage
      fixture.detectChanges()
    })
  )

  it('should create', () => {
    // First
    jest.mock('../../../services/sanity/sanity.service', () => {
      return {
       urlFor: jest.fn()
      }
    })
   
   // Second
   const mockSanityService = SanityService as jest.Mock<SanityService> // to avoid typescript alerts
   const mockService = jest
      .spyOn(mockSanityService.prototype, 'urlFor')
      .mockImplementation((source) => {return 'test'})
    })

    expect(mockService).toHaveBeenCalled()
    expect(component.imageUrl).toHaveBeenCalled()
    expect(component).toBeTruthy()
  })
})

似乎我的模拟被忽略了.我总是从@sanity/image-url包中得到一个错误，它等待特定的数据.
我做错了什么？我不明白什么？
谢谢你的帮助！