<MockProvider />

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

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