Supabase Mocking (Regular Mocking vs API Nock)

supabaseClient.ts

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

TestComponent-nock.test.tsx

import '@testing-library/jest-dom'

import { render } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import nock from 'nock'

import TestComponent from './TestComponent'

const mockResultData = [
    {
        some: 'response'
    }
]

nock.disableNetConnect()
nock(/localhost/)
    .post('/rest/v1/rpc/myfunction', {
        param1: 'test'
    })
    .once()
    .reply(200, mockResultData)

describe('test component', () => {
    it('properly nocks the supabase api', async () => {
        const { container } = render(<TestComponent />)
        const { waitFor } = renderHook(() => {}, {})

        await waitFor(() => {
            return nock.isDone()
        })

        expect(container.getElementsByTagName('pre').item(0).innerHTML).toEqual(JSON.stringify(mockResultData, null, 2))
    })
})

TestComponent.test.tsx

import '@testing-library/jest-dom'

import { render } from '@testing-library/react'
import { act, renderHook } from '@testing-library/react-hooks'

import TestComponent from './TestComponent'

const mockResultData = [
    {
        some: 'response'
    }
]

jest.mock('../../utils/supabaseClient', () => ({
    __esModule: true,
    supabase: {
        rpc: jest.fn()
    }
}))

describe('test component', () => {
    const rpcMock = jest.requireMock('../../utils/supabaseClient').supabase.rpc
    beforeEach(() => {
        rpcMock.mockReturnValue({
            data: mockResultData
        })
    })

    it('properly mocks the supabase singleton', async () => {
        const { waitFor } = renderHook(() => {}, {})

        const { container } = render(<TestComponent />)

        await act(() =>
            waitFor(() => {
                return expect(rpcMock).toHaveBeenCalled()
            })
        )

        expect(container.getElementsByTagName('pre').item(0).innerHTML).toEqual(JSON.stringify(mockResultData, null, 2))
    })
})

TestComponent.tsx

import { FC, useEffect, useState } from 'react'

import { supabase } from '../../utils/supabaseClient'

const TestComponent: FC = () => {
    const [result, setResult] = useState([])

    useEffect(() => {
        ;(async () => {
            const result = await supabase.rpc('myfunction', { param1: 'test' })
            setResult(result.data)
        })()
    }, [])

    return <pre>{JSON.stringify(result, null, 2)}</pre>
}

export default TestComponent