javascript - 如何在 Jest 中模拟 Firestore .collection？

Question

我有以下代码Menu.js当我在测试文件中模拟它时，我仍然有一个错误，TypeError: Cannot read property 'collection' of undefined到目前为止我尝试使用下面列出的 2 个模拟，但没有成功。我想对 2 个场景进行简单测试，一个有正确的 firestore 响应，一个有错误。但是，我目前一直在嘲笑 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 个失败的模拟。

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)
})

标签： javascriptreactjsfirebasegoogle-cloud-firestorejestjs