(...).mockImplementation is not a function

Question

I've used this test in the past with a React app without any issues:

import { render, fireEvent, screen, waitFor } from '@testing-library/react'
import { RelatedContent } from '../components/relatedcontent'
import { onValue } from '../components/firebase'
jest.mock('../components/firebase')

test('RelatedContent -> displays related content', async () => {

    let fakeData = {
            
        'flex-new-row': 20,
        'chronlabs': 25
        
    }

    let snapshot = {val: () => fakeData}

    onValue.mockImplementation((ref, callback) => {

        callback(snapshot)

        return jest.fn()

    })
        
    render(<RelatedContent numRelated = {5}/>)
    
    await waitFor(() => expect(document.querySelector("a[href='/flex-new-row']")).toBeTruthy())
    await waitFor(() => expect(document.querySelector("a[href='/chronlabs']")).toBeTruthy())
    
})

Now I'm using the same test on a Next.js app, and I'm getting the following error:

TypeError: _firebase.onValue.mockImplementation is not a function

Update

The RelatedContent component looks like:

import React, { useState, useEffect } from 'react'
import { db, onValue, ref } from './firebase'

const RelatedContent = ({ numRelated }) => {
    
    const [related, setRelated] = useState([])
    
    useEffect(() => {

        let unsubscribe = onValue(ref(db, `posts/related`), snapshot => {
            
            let _related = Object.keys(snapshot.val())
            
            setRelated(_related)
            
        })
        
        return () => unsubscribe()
        
    }, [])
    
    return(
        <div className = 'Related'>
            {related.slice(0, numRelated).map((elem, i) => 
                <Link href = {elem}>Whatever</Link>
            )}
        </div>
    )
    
}

export default RelatedContent

And the Firebase component looks like:

import { initializeApp } from 'firebase/app'
import { getDatabase, goOnline, goOffline, limitToLast, onDisconnect, onValue, orderByValue, push, query, ref, remove, runTransaction, update } from 'firebase/database'

const config = { ... }

const app = initializeApp(config)

const db  = getDatabase(app)

export { db, dbt, goOnline, goOffline, limitToLast, onDisconnect, onValue, orderByValue, push, query, ref, remove, runTransaction, update }

package.json looks like:

{
    "name": "app-next",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "test": "jest"
    },
    "dependencies": {
        "@primer/octicons-react": "^16.3.0",
        "chart.js": "^2.7.2",
        "firebase": "^9.6.4",
        "gfm": "0.0.1",
        "moment": "^2.29.1",
        "next": "12.0.8",
        "prismjs": "^1.26.0",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-markdown": "^8.0.0",
        "rehype-katex": "^6.0.2",
        "rehype-raw": "^6.1.1",
        "remark-gfm": "^3.0.1",
        "remark-math": "^5.1.1"
    },
    "devDependencies": {
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "eslint": "8.7.0",
        "eslint-config-next": "12.0.8",
        "eslint-plugin-promise": "^6.0.0",
        "jest": "^27.4.7"
    }
}

If I place the fake data and the onValue.mockImplementation() function before the test declaration, the test passes correctly.

The problem is that I've several tests with multiple definitions of the fake data, and I need to declare the fake data within every test.

If I do so, I get the error.