Mocking Data Provider

ordinary-sapphire · 2023-02-08T23:44:15.129Z

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.

R

refine-support-bot•2/8/23, 11:44 PM

Hi, I am refine support bot

. 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

C

colossal-harlequin•2/9/23, 6:36 AM

Hey @thedevkim,

You need to create a wrapper that contains

<Refine/>

<Refine/>

<Refine/>

<Refine/>. After you need to pass mock data provider to

<Refine/>

<Refine/>

<Refine/>

<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

C

colossal-harlequin•2/9/23, 6:38 AM

Also, you can checkout this issue for more information: https://github.com/refinedev/refine/issues/3432

O

ordinary-sapphireOP•2/9/23, 6:39 AM

@salihozdemir
Hi. I would like to confirm this

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

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

C

colossal-harlequin•2/9/23, 6:43 AM

You can find our

<TestWrapper>

<TestWrapper>

<TestWrapper>

<TestWrapper> in here:

https://github.com/refinedev/refine/blob/next/packages/core/test/index.tsx

O

ordinary-sapphireOP•2/9/23, 6:45 AM

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] }),
        },
    };
};

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?

O

ordinary-sapphireOP•2/9/23, 6:45 AM

@salihozdemir

O

ordinary-sapphireOP•2/9/23, 6:46 AM

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

O

Omer•2/9/23, 7:27 AM

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,...

O

ordinary-sapphireOP•2/9/23, 11:59 AM

Hi. What version does this have?

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

I get error when importing "@test"

Vverbal-lime Hey @thedevkim , Could you check this issue? https://github.com/refinedev/refine...

O

ordinary-sapphireOP•2/9/23, 12:06 PM

Hi. Do you know where he gets the RefineTestWrapper ?

O

Omer•2/9/23, 12:07 PM

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

Vverbal-lime https://github.com/refinedev/refine/blob/next/packages/react-table/test/index.ts...

O

ordinary-sapphireOP•2/9/23, 12:12 PM

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

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

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

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

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

C

colossal-harlequin•2/9/23, 12:39 PM

No, you need to create your own

<TestWrapper>

<TestWrapper>

<TestWrapper>

<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

Ccolossal-harlequin No, you need to create your own `<TestWrapper>`. When you render your hook in t...

O

ordinary-sapphireOP•2/9/23, 12:56 PM

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...

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,...

O

ordinary-sapphireOP•2/9/23, 1:02 PM

Where do i get these files ?

O

ordinary-sapphireOP•2/9/23, 1:02 PM

Do i need to copy all ?

C

colossal-harlequin•2/9/23, 1:10 PM

Actually you're right, sorry. Can you create

<TestWrapper>

<TestWrapper>

<TestWrapper>

<TestWrapper> like here?
https://github.com/refinedev/refine/blob/next/packages/react-table/test/index.tsx#L13

O

ordinary-sapphireOP•2/9/23, 1:18 PM

Just this one right? or the entire code?

C

colossal-harlequin•2/9/23, 1:19 PM

Just component

O

ordinary-sapphireOP•2/9/23, 1:19 PM

How about the MockJSONServer

O

ordinary-sapphireOP•2/9/23, 1:19 PM

from ./dataMock

C

colossal-harlequin•2/9/23, 1:20 PM

Off course, you can use

MockJSONServer

MockJSONServer

MockJSONServer

MockJSONServer .

C

colossal-harlequin•2/9/23, 1:20 PM

Also,

MockRouterProvider

MockRouterProvider

MockRouterProvider

MockRouterProvider

O

ordinary-sapphireOP•2/9/23, 1:23 PM

Okay so i copied the code of testwrapper and have this on my test.

O

ordinary-sapphireOP•2/9/23, 1:24 PM

When i test it, i get infinite test error.

C

colossal-harlequin•2/9/23, 1:25 PM

Can you share your TestWrapper and error messages?

O

ordinary-sapphireOP•2/9/23, 1:26 PM

This is my TestWrapper.

O

ordinary-sapphireOP•2/9/23, 1:27 PM

Oordinary-sapphire Click to see attachment

C

colossal-harlequin•2/9/23, 1:29 PM

You don't need line 40

O

ordinary-sapphireOP•2/9/23, 1:29 PM

i manage to take a screnshot while in infinite error

O

ordinary-sapphireOP•2/9/23, 1:29 PM

sec

O

ordinary-sapphireOP•2/9/23, 1:30 PM

Oordinary-sapphire Okay so i copied the code of testwrapper and have this on my test.

C

colossal-harlequin•2/9/23, 1:30 PM

MockDataProvider is a function. If you invoke it, it probably works.

O

ordinary-sapphireOP•2/9/23, 1:31 PM

This is my test

O

ordinary-sapphireOP•2/9/23, 1:31 PM

can you tell me the problem on this one ?

O

ordinary-sapphireOP•2/9/23, 1:32 PM

kinda confused sorry

C

colossal-harlequin•2/9/23, 1:34 PM

Yes, you need to use MockDataProvider like this:

let d = render(
  <CampaingList/>,
  wrapper: TestWrapper({
    dataProvider: MockDataProvider(),
  })
)

let d = render(
  <CampaingList/>,
  wrapper: TestWrapper({
    dataProvider: MockDataProvider(),
  })
)

let d = render(
  <CampaingList/>,
  wrapper: TestWrapper({
    dataProvider: MockDataProvider(),
  })
)

let d = render(
  <CampaingList/>,
  wrapper: TestWrapper({
    dataProvider: MockDataProvider(),
  })
)

O

ordinary-sapphireOP•2/9/23, 1:34 PM

oh

O

ordinary-sapphireOP•2/9/23, 1:35 PM

The error is gone now, I will in the component if it really rendered the lists.

O

ordinary-sapphireOP•2/9/23, 1:35 PM

Thanks

O

ordinary-sapphireOP•2/9/23, 11:27 PM

Hi. I already have a data, but in the table the list is not showing and there is no pagination. I am using jest testing

O

ordinary-sapphireOP•2/9/23, 11:39 PM

When i console log it on the render Table.Column, there is a value

O

ordinary-sapphireOP•2/9/23, 11:40 PM

It seems like no row has been created

O

ordinary-sapphireOP•2/9/23, 11:43 PM

O

ordinary-sapphireOP•2/9/23, 11:43 PM

I console log the tableProps and the data is actually there, but its not rendering in the row

C

colossal-harlequin•2/10/23, 7:27 AM

I don't know the parts with Antd Table. If you are writing unit tests, you should test small functions, if you want to test useTable and Antd.Table together, writing e2e test seems like a better solution.

You can see our unit tests about useTable in here, may it can inspire you.
https://github.com/refinedev/refine/blob/next/packages/antd/src/hooks/table/useTable/useTable.spec.ts

O

ordinary-sapphireOP•2/11/23, 1:30 PM

How do i test if its an edit page ?

O

ordinary-sapphireOP•2/11/23, 1:30 PM

This one seems to be working only for getList

O

ordinary-sapphireOP•2/11/23, 1:31 PM

How do i test a page for edit ?
It should use the getOne right ?