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
cloudy-cyan•2y 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.tsnational-goldOP•2y 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?
cloudy-cyan•2y ago
We don't have.
is this not work ? sorry i couldn't run code right now.
If is not work, I will try to build an example for you.
national-goldOP•2y 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
cloudy-cyan•2y 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
national-goldOP•2y ago
Thanks! I'll try that
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,...