Firebase SDKをJestでMockしてテストする

やりたいこと

Firebase SDKを利用した関数のテストをしたいと思い立ちました。実際にAPIにアクセスせずにテストを実行したいので、Firebase SDKをMockしてテストを行うこととしました。テストはJestを使います。

テスト対象のコード

例としてCloud Firestoreを利用する際の手順を記載します。
なお、以下には記載していませんが、環境構築は終わっているものとすします。（手順はこちらの通り！）

以下のようなFirestoreのドキュメントを監視して更新があったときにsomethingをする関数をテストすることにしてみます。

target.js

  async watchDoc({ commit }) {
    await firebase
      .firestore()
      .collection('users')
      .onSnapshot((snapshot) => {
        snapshot.forEach((doc) => {
          doSomething(doc)
        })
      })
  }

Colud Firestoreは以下のように初期化されていることとします。

initFirebase.js

import firebase from 'firebase'

// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID
});

export default firebase

テストコード

以下のようにMockを作成し、振る舞いを定義することで、実際にAPIを叩かずにdoSomething関数を動作させてテストを行うことができます。

firestore.spec.js

import * as firebase from 'initFirebase'
import * as firestore from 'target.js'

// firebase.firestore()のMockを作成する
jest.mock('initFirebase', () => ({
  firestore: jest.fn()
}))

// firebase.firestore()の振る舞いを定義する
const firebaseMock = firebase.firestore.mockImplementation(() => {
     return {
        collection: jest.fn(() => ({
          onSnapshot: jest.fn((func) => {
            func(doc) // docにはAPIから返ってくるDocument相当のデータを入れる
          })
        }))
      }
   })

// テストを記述していく

Mock方法のみ記載しています。テスト部分ややFirestoreの構築方法などは別の記事などを参考にしてください。。