firestoreを呼び出している処理をjestでテストしたい

nextjsでpages以下に配置したページの表示をテストしたい。

内部的にはfirestoreからデータを取得してページを構成しているので、firestoreを呼び出しているところを良い感じにmockで置き換えてあげれば良さそう。

今回はjestを使っているので調べてみると

jest.mock()

ref: https://jestjs.io/docs/ja/manual-mocks

を使うと良さそう。

mock用のmoduleをimportして

import mock from 'mock'

jest.mock('../moduleName', () => {
  return {
    __esModule: true,
    default: mock,
  };
});

ref: https://jestjs.io/docs/ja/manual-mocks

みたいな感じにすれば良いのかなとやってみたら、

Cannot read property 'default' of undefined

というエラーが出るので、

jest.mockが呼ばれる段階でまだmockモジュールがimportされていないという理解。

ES module importを利用する

という項目がrefに用意されているので対処できそうだけど、ぱっと見よくわからなかったので__mocks__を活用することに。

モジュールのサブディレクトリ に__mocks__を用意してそこにmockモジュールを配置して

jest.mock('module_name')

ref: https://jestjs.io/docs/ja/manual-mocks

をテスト内で呼び出してあげるとmockモジュールが呼び出されて処理が置き換えられるとのこと。

というわけでfirestoreを呼び出している処理をmockに置き換える方法はわかったので、あとはfirestoreを呼び出している処理を良い感じにmockに置き換えやすいインターフェイスに整理してあげて無事テストできるようになりました。