correct-apricot•2y ago

Mocking Data Provider

Hi. How can i mock data provider to return lists that i wanted? I am testing with jest and its been 3 days i haven't solved this problem.

37 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆 If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
Answer: You can use the swizzle to create a data provider and modify it according to your API. You can also use the mockUsers array to create a login function in the authProvider. Additionally, you can use the Nestjsx Crud Data Provider to connect to your Nestjsx API. SOURCES: ./docs/tutorial/2-understanding-dataprovider/1-swizzle.md, ./docs/tutorial/5-understanding-authprovider/1-create-authprovider.md, ./docs/advanced-tutorials/data-provider/strapi-v4.md, ./docs/examples/data-provider/nestjsxCrud.md

xenophobic-harlequin•2y ago

Hey @thedevkim, You need to create a wrapper that contains <Refine/>. After you need to pass mock data provider to <Refine/>. You can find our mock data provider in here: https://github.com/refinedev/refine/blob/next/packages/core/test/dataMocks.ts#L41 You can find usage of TestWrapper: https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/useTable/index.spec.ts Also, you can checkout this issue for more information: https://github.com/refinedev/refine/issues/3432

correct-apricot•2y ago

@salihozdemir Hi. I would like to confirm this

import { MockJSONServer, TestWrapper } from "@test";

Can you give me the link to this module/package ?

xenophobic-harlequin•2y ago

You can find our <TestWrapper> in here: https://github.com/refinedev/refine/blob/next/packages/core/test/index.tsx

correct-apricot•2y ago

const MockDataProvider = () => {
    return {
        default: {
            create: () => Promise.resolve({ data: posts[0] }),
            createMany: () => Promise.resolve({ data: posts }),
            deleteOne: () => Promise.resolve({ data: posts[0] }),
            deleteMany: () => Promise.resolve({ data: [] }),
            getList: () => Promise.resolve({ data: posts, total: 2 }),
            getMany: () => Promise.resolve({ data: [...posts] }),
            getOne: () => Promise.resolve({ data: posts[0] }),
            update: () => Promise.resolve({ data: posts[0] }),
            updateMany: () => Promise.resolve({ data: [] }),
            getApiUrl: () => "https://api.fake-rest.refine.dev",
            custom: () => Promise.resolve({ data: [...posts] }),
        },
    };
};

const MockDataProvider = () => {
    return {
        default: {
            create: () => Promise.resolve({ data: posts[0] }),
            createMany: () => Promise.resolve({ data: posts }),
            deleteOne: () => Promise.resolve({ data: posts[0] }),
            deleteMany: () => Promise.resolve({ data: [] }),
            getList: () => Promise.resolve({ data: posts, total: 2 }),
            getMany: () => Promise.resolve({ data: [...posts] }),
            getOne: () => Promise.resolve({ data: posts[0] }),
            update: () => Promise.resolve({ data: posts[0] }),
            updateMany: () => Promise.resolve({ data: [] }),
            getApiUrl: () => "https://api.fake-rest.refine.dev",
            custom: () => Promise.resolve({ data: [...posts] }),
        },
    };
};

Just by putting dataProvider={MockDataProvider} i can already mock my lists output right? @salihozdemir I will check it in few mins. Because as i have experienced. i tried mocking the dataProvider and it says an error, that "needs to provider a dataProviderName" something like that, ill let you know

Omer•2y ago

Hey @thedevkim , Could you 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,...

correct-apricot•2y ago

Hi. What version does this have?

import { MockJSONServer, TestWrapper } from "@test";

I get error when importing "@test" Hi. Do you know where he gets the RefineTestWrapper ?

Omer•2y ago

https://github.com/refinedev/refine/blob/next/packages/react-table/test/index.tsx#L13

correct-apricot•2y ago

Hi, im sorry, im a bit confused. Is it?

import { TestWrapper } from '@testing-library/react';

import { TestWrapper } from '@testing-library/react';

xenophobic-harlequin•2y ago

No, you need to create your own <TestWrapper>. When you render your hook in test environment, the hook needs a wrapper which contains refine providers. You can copy our TestWrapper component here: https://github.com/refinedev/refine/blob/next/packages/core/test/index.tsx#L65-L171 Then, you can use it like here: https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/useTable/index.spec.ts#L23-L28

correct-apricot•2y ago

Is it the same with this RefineTestWrapper in this section ?

https://github.com/refinedev/refine/issues/3432#issuecomment-1398627534

GitHub

[BUG] Can't test a component that uses useCustomMutation · Issue #3...

correct-apricot•2y ago

Where do i get these files ?

correct-apricot•2y ago

Do i need to copy all ?

xenophobic-harlequin•2y ago

Actually you're right, sorry. Can you create <TestWrapper> like here? https://github.com/refinedev/refine/blob/next/packages/react-table/test/index.tsx#L13

correct-apricot•2y ago

Just this one right? or the entire code?