matsutoba’s blog

フロントエンドエンジニアをしています

jestでフックが返す関数を呼び出したとき、同じフック内の別の関数が呼び出されたかテストしたい

Reactでこのようなカスタムフックを作成し、callFoo() を実行したら foo() が実行されていることを確認したい。

export const useMyCustom = {
  const callFoo = ():void => {
    foo();
  }
  const foo = ():void => {
    // ...
  }
  return { callFoo }
}

spyOnを使ってフックが返す関数をモックにしておく

こちらでやりたいことが回答されていました。

stackoverflow.com

最初に書いたフックのテストに置き換えてみると(stackoverflowの回答とほぼ同じですが)

import * as useMyCustomHook from '@hooks/useMyCustom';
import { renderHook } from '@testing-library/react-hooks';

it('fooが呼び出されること', () => {
  const mockFoo = jest.fn();
  jest.spyOn(useMyCustomHook, 'useMyCustom').mockImplementation(() 
=> {
    return {
      foo: mockFoo,
    }
});
  const { result } = renderHook(() => useMyCustom());
  result.current.callFoo();  
  expect(mockFoo).toBeCalled();
});
補足

stackoverflowだとtoHaveBeenCalled() でチェックしていたが、toBeCalled()と何が違うのかと思い確認したところ、toBeCalled()はtoHaveBennCalled()の別名だったので、どちらで記述しても大丈夫そう。