Как издеваться над Firestore .collection в Jest?

Question

У меня есть следующий код в Menu.js И когда я высмеиваю его в тестовом файле, у меня все еще возникает ошибка, TypeError: Cannot read property 'collection' of undefined Пока я пробовал с двумя перечисленными ниже mocks, но безуспешно. Я хотел бы иметь простой тест для 2 сценариев ios, один с правильным ответом firestore и один с ошибкой. Однако в настоящее время я застрял на mocking firestore.

useEffect(() => {
    db.collection('menu').onSnapshot(
      { includeMetadataChanges: true },
      (snapshot) => snapshot
    )
    try {
      getCollection('menu').then((snapshot) => {
        const data = getData(snapshot)
        const menu = formatMenu(data)
        setAppetizers(menu.Appetizers)
        setDesserts(menu.Desserts)
        setSalads(menu.Salads)
        setMaindishes(menu.Mains)
        handleLoading(false)
      })
    } catch (err) {
      handleLoading(false)
      handleError(err)
      notify(DB_ERROR_MSG)
      console.log(error)
    }
  }, [])

Menu.test. js файл с 2 неудачными mocks.

jest.mock('../../firebase', () => {
  firebase: {
    db: jest.fn().mockReturnValue({
      ref: jest.fn().mockReturnThis(),
      on: jest.fn((eventType, callback) => callback()),
      update: jest.fn(() => Promise.resolve()),
      remove: jest.fn(() => Promise.resolve()),
      once: jest.fn(() => Promise.resolve()),
      collection: jest.fn(() => Promise.resolve())
    })
  }
})

jest.mock('../../firebase', () => {
  firebase: {
    db: {
      collection: jest.fn(() => Promise.resolve())
    }
  }
})

test('Should render Menu component', () => {
  const { container } = renderWithRouter(<Menu />)
  const text = 'Menu'
  expect(container.innerHTML).toMatch(text)
})