Skip to main content
Version: 5.0

<MockProvider />

function MockProvider({
}: {
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 />



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.



Renders the children prop.


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