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)
    }
  }, [])

带有2个失败的模拟的Menu.test.js文件。


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

如何在Jest中模拟Firestore .collection？

0 个答案: