Mocking useTable with Jest

Hey there - I'm trying to mock the output of useTable to check the behavior of a custom hook. Here is my code - import { useTable } from '@pankod/refine-core'; import { renderHook } from '@testing-library/react'; const isError = { tableQueryResult: { data: undefined, dataUpdatedAt: 0, error: { isAxiosError: true }, errorUpdateCount: 1, errorUpdatedAt: 1674504481247, failureCount: 4, failureReason: { isAxiosError: true }, fetchStatus: "idle", isError: true, isFetched: true, isFetchedAfterMount: true, isFetching: false, isInitialLoading: false, isLoading: false, isLoadingError: true, isPaused: false, isPlaceholderData: false, isPreviousData: false, isRefetching: false, isStale: true, isSuccess: false, refetch: () => { }, remove: () => { }, status: "error" } } let mockData: any; jest.mock('@pankod/refine-core', () => { return { __esModule: true, useTable: jest.fn(() => (mockData)) }; }); describe('test useTableCustom hook', () => { afterEach(() => { jest.clearAllMocks(); }); it('successfully uses useTable', () => { mockData = isError; const { result } = renderHook(() => useTable({ resource: '' })); expect(result.current).toBeTruthy(); }); }); result turns out to be undefined, test fails. Did I set up the mock incorrectly - is there any example in the source code of mocking the output of useTable?
7 Replies
foreign-sapphire
foreign-sapphire2y ago
Hi @rcope313, useTable not responsible for fetching data. it's using useList under the hood. here is the example how we mock useList return value https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/data/useList.spec.tsx#L19 you can use our TestWrapper and can you can mock with our MockJSONServer to mock useTable. here is the example how we mock dataProvider https://github.com/refinedev/refine/blob/next/packages/core/test/dataMocks.ts
exotic-emerald
exotic-emeraldOP2y ago
@alicanerdurmaz Ah - so, even if I am wrapping useTable in my custom hook, I should mock the result of useList, intead, using that example as reference?
foreign-sapphire
foreign-sapphire2y ago
We don't have. is this not work ? sorry i couldn't run code right now.
const { result } = renderHook(() => useTable(), {
wrapper: TestWrapper({ dataProvider: MockJSONServer }),
});
const { result } = renderHook(() => useTable(), {
wrapper: TestWrapper({ dataProvider: MockJSONServer }),
});
If is not work, I will try to build an example for you.
exotic-emerald
exotic-emeraldOP2y ago
@alicanerdurmaz what is the module to install to be able to use TestWrapper & MockJSONServer? I see it in the source code, but I'm not seeing how to install
foreign-sapphire
foreign-sapphire2y ago
sorry. they are not exported. I sent you as an example, I was thinking maybe you can copy paste parts your need https://github.com/refinedev/refine/blob/next/packages/core/test/index.tsx
exotic-emerald
exotic-emeraldOP2y ago
Thanks! I'll try that
Omer
Omer2y ago
Hey @rcope313 , You can check this issue https://github.com/refinedev/refine/issues/3432
GitHub
[BUG] Can't test a component that uses useCustomMutation · Issue #3...
Describe the bug Components that are using refine hooks are impossible to test. One of the examples is a component making a custom request to server. Here is my component code. import { FileUpload,...