title: How to mock Firestore .collection in Jest?
body: <p>I have following code in <code>Menu.js</code> And when I mocking it in test file I still have an error that <code>TypeError: Cannot read property 'collection' of undefined</code> So far I tried with 2 mocks listed below, without success. I would like to have simple test for 2 scenarios, one with proper firestore response, and one with error. However I'm currently stuck on mocking firestore.</p>
  
  <pre class="lang-js prettyprint-override"><code>
  useEffect(() =&gt; {
      db.collection('menu').onSnapshot(
        { includeMetadataChanges: true },
        (snapshot) =&gt; snapshot
      )
      try {
        getCollection('menu').then((snapshot) =&gt; {
          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)
      }
    }, [])
  </code></pre>
  
  <p>Menu.test.js file with 2 failing mocks. </p>
  
  <pre class="lang-js prettyprint-override"><code>
  jest.mock('../../firebase', () =&gt; {
    firebase: {
      db: jest.fn().mockReturnValue({
        ref: jest.fn().mockReturnThis(),
        on: jest.fn((eventType, callback) =&gt; callback()),
        update: jest.fn(() =&gt; Promise.resolve()),
        remove: jest.fn(() =&gt; Promise.resolve()),
        once: jest.fn(() =&gt; Promise.resolve()),
        collection: jest.fn(() =&gt; Promise.resolve())
      })
    }
  })
  
  jest.mock('../../firebase', () =&gt; {
    firebase: {
      db: {
        collection: jest.fn(() =&gt; Promise.resolve())
      }
    }
  })
  
  test('Should render Menu component', () =&gt; {
    const { container } = renderWithRouter(&lt;Menu /&gt;)
    const text = 'Menu'
    expect(container.innerHTML).toMatch(text)
  })
  </code></pre>