Skip to main content
Version: 5.0

<MockProvider />

function MockProvider({
children,
results,
}: {
children: React.ReactChild;
results: Fixture[];
}): JSX.Element;

\<MockProvider /> is a simple substitute provider to prefill the cache with fixtures so the 'happy path' can be tested. This is useful for storybook as well as component testing.

Deprecated: Use \<MockResolver /> instead as it also supports imperative fetches like create and update.

Note: \<MockProvider /> disables dispatches, thus no fetches will occur. To simply initalize the cache, use mockInitialState() to construct initialState for the normal \<CacheProvider />

Arguments

results

interface Fixture {
request: ReadEndpoint;
params: object;
result: object | string | number;
}

This prop specifies the fixtures to use data from. Each item represents a fetch defined by the Endpoint and params. Result contains the JSON response expected from said fetch.

Returns

JSX.Element

Renders the children prop.

Example

import { MockProvider } from '@rest-hooks/test';

import ArticleResource from 'resources/ArticleResource';
import MyComponentToTest from 'components/MyComponentToTest';

const results = [
{
request: ArticleResource.list(),
params: { maxResults: 10 },
result: [
{
id: 5,
content: 'have a merry christmas',
author: 2,
contributors: [],
},
{
id: 532,
content: 'never again',
author: 23,
contributors: [5],
},
],
},
];

<MockProvider results={results}>
<MyComponentToTest />
</MockProvider>