vi.fnとvi.spyOnの違い

一言でいえば

fnは、0からTest Doubleを作る

spyOnは、既存のobjectから(一部の)Test Double作る

テスト時に行いたいことが、

ただ単に「関数が呼ばれたかどうか知りたいだけで実装はどうでも良い」ならvi.fnを使えば良い

libraryが提供する既存の関数の置き換えたいならvi.spyOnを使えば良い

ほぼ同じようなことをやってる例

vi.fnは0からtest doubleを作る

code:fn.ts

const fn = vi.fn()

fn('hello world')

fn.mock.calls0 === 'hello world'

vi.spyOnは既存のobjectからtest doubleを作る

code:spyOn.ts

const market = { getApples: () => 100 } // 既存のobject

const getApplesSpy = vi.spyOn(market, 'getApples')

market.getApples()

getApplesSpy.mock.calls.length === 1

両者ともに、

mock object的側面も

test stub的側面も

両方持っている

code:ts

const getApples = vi.fn(() => 0)

getApples()

expect(getApples).toHaveBeenCalled() // spy

expect(getApples).toHaveReturnedWith(0) // spy

getApples.mockReturnValueOnce(5) // stub

const res = getApples()

expect(res).toBe(5)

expect(getApples).toHaveNthReturnedWith(2, 5)

だから「spy」とか言ってるけど嘘

命名がおかしい