feat: FixtureEndpoint & renderRestHook resolverFixtures (#1027)

Author: ntucker

__tests__/new.ts

@@ -249,7 +249,7 @@ export class FutureArticleResource extends CoolerArticleResource {
       fetch(body: Partial<AbstractInstanceType<T>>) {
         return instanceFetch(this.url(), this.getFetchInit(body));
       },
-      url: this.listUrl.bind(this),
+      url: () => this.listUrl({}),
       update: (newid: string) => ({
         [this.list().key({})]: (existing: string[] = []) => [
           newid,

docs/api/MockResolver.md

@@ -5,10 +5,10 @@ title: <MockResolver />
 ```typescript
 function MockResolver({
   children,
-  results,
+  fixtures,
 }: {
   children: React.ReactNode;
-  results: Fixture[];
+  fixtures: Fixture[];
 }): JSX.Element;
 ```
 
@@ -21,21 +21,44 @@ This is useful for [storybook](../guides/storybook.md) as well as component test
 ### fixtures
 
 ```typescript
+export interface SuccessFixtureEndpoint<
+  E extends EndpointInterface = EndpointInterface,
+> {
+  endpoint: E;
+  args: Parameters<E>;
+  response: ResolveType<E>;
+  error?: false;
+}
+
+/** @deprecated */
 export interface SuccessFixture {
-  request: ReadShape<Schema, object>;
-  params: object;
+  request: FetchShape<Schema, any>;
+  params?: any;
+  body?: any;
   result: object | string | number;
   error?: false;
 }
 
+export interface ErrorFixtureEndpoint<
+  E extends EndpointInterface = EndpointInterface,
+> {
+  endpoint: E;
+  args: Parameters<E>;
+  response: any;
+  error: true;
+}
+
+/** @deprecated */
 export interface ErrorFixture {
-  request: ReadShape<Schema, object>;
-  params: object;
+  request: FetchShape<Schema, any>;
+  params?: any;
+  body?: any;
   result: Error;
   error: true;
 }
 
-export type Fixture = SuccessFixture | ErrorFixture;
+export type FixtureEndpoint = SuccessFixtureEndpoint | ErrorFixtureEndpoint;
+export type Fixture = SuccessFixture | ErrorFixture | FixtureEndpoint;
 ```
 
 This prop specifies the fixtures to use data from. Each item represents a fetch defined by the
@@ -59,9 +82,9 @@ import MyComponentToTest from 'components/MyComponentToTest';
 
 const results = [
   {
-    request: ArticleResource.list(),
-    params: { maxResults: 10 },
-    result: [
+    endpoint: ArticleResource.list(),
+    args: [{ maxResults: 10 }] as const,
+    response: [
       {
         id: 5,
         content: 'have a merry christmas',

docs/api/makeRenderRestHook.md

@@ -39,8 +39,11 @@ type RenderRestHookFunction = {
     callback: (props: P) => R,
     options?: {
       initialProps?: P;
-      results?: Fixture[];
+      initialFixtures?: FixtureEndpoint[];
+      resolverFixtures?: FixtureEndpoint[];
       wrapper?: React.ComponentType;
+      // @deprecated
+      results?: Fixture[];
     },
   ): {
     readonly result: {
@@ -64,13 +67,19 @@ to `renderRestHook()` will result in a completely fresh cache state as well as m
 
 Hooks to run inside React. Return value will become available in `result`
 
-#### options.results
+#### options.initialFixtures
 
 Can be used to prime the cache if test expects cache values to already be filled. Takes same
 [array of fixtures as MockResolver](../api/MockResolver#fixtures)
 
 This has the same effect as initializing [<CacheProvider />](../api/CacheProvider) with [mockInitialState()](../api/mockInitialState)
 
+### options.resolverFixtures
+
+These fixtures are used to resolve any new requests. This is most useful for mocking imperative fetches like mutations, but can also allow testing suspending states or transitions.
+
+Wrrks by adding [MockResolver](../api/MockResolver) as a wrapper.
+
 #### options.initialProps
 
 The initial values to pass to the callback function

docs/guides/storybook.md

@@ -59,9 +59,9 @@ existing so loading fallback is shown.
 export default {
   full: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: [
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: [
         {
           id: 5,
           content: 'have a merry christmas',
@@ -77,9 +77,9 @@ export default {
       ],
     },
     {
-      request: ArticleResource.update(),
-      params: { id: 532 },
-      result: {
+      endpoint: ArticleResource.update(),
+      args: [{ id: 532 }] as const,
+      response: {
         id: 532,
         content: 'updated "never again"',
         author: 23,
@@ -89,16 +89,16 @@ export default {
   ],
   empty: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: [],
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: [],
     },
   ],
   error: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: { message: 'Bad request', status: 400, name: 'Not Found' },
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: { message: 'Bad request', status: 400, name: 'Not Found' },
       error: true,
     },
   ],

docs/guides/unit-testing-components.md

@@ -14,9 +14,9 @@ with said results.
 export default {
   full: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: [
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: [
         {
           id: 5,
           content: 'have a merry christmas',
@@ -32,9 +32,9 @@ export default {
       ],
     },
     {
-      request: ArticleResource.update(),
-      params: { id: 532 },
-      result: {
+      endpoint: ArticleResource.update(),
+      args: [{ id: 532 }] as const,
+      response: {
         id: 532,
         content: 'updated "never again"',
         author: 23,
@@ -44,16 +44,16 @@ export default {
   ],
   empty: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: [],
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: [],
     },
   ],
   error: [
     {
-      request: ArticleResource.list(),
-      params: { maxResults: 10 },
-      result: { message: 'Bad request', status: 400, name: 'Not Found' },
+      endpoint: ArticleResource.list(),
+      args: [{ maxResults: 10 }] as const,
+      response: { message: 'Bad request', status: 400, name: 'Not Found' },
       error: true,
     },
   ],

packages/core/src/react-integration/__tests__/useMeta-endpoint.tsx

@@ -16,7 +16,7 @@ describe('useMeta()', () => {
   });
 
   it('should contain error', () => {
-    const results = [
+    const results: Fixture[] = [
       {
         request: TypedArticleResource.detail().bind(undefined, payload),
         result: new Error('broken'),

packages/experimental/src/__tests__/useFetcher.ts

@@ -1,12 +1,13 @@
 import { FutureArticleResource } from '__tests__/new';
 import nock from 'nock';
-import { useCache, useResource } from '@rest-hooks/core';
+import { useCache, useResource, ResolveType } from '@rest-hooks/core';
 
 // relative imports to avoid circular dependency in tsconfig references
 import {
   makeRenderRestHook,
   makeCacheProvider,
   makeExternalCacheProvider,
+  FixtureEndpoint,
 } from '../../../test';
 import useFetcher from '../useFetcher';
 
@@ -132,16 +133,31 @@ for (const makeProvider of [makeCacheProvider, makeExternalCacheProvider]) {
     });
 
     it('should update on create', async () => {
-      const { result, waitForNextUpdate } = renderRestHook(() => {
-        const articles = useResource(FutureArticleResource.list(), {});
-        const fetch = useFetcher();
-        return { articles, fetch };
-      });
-      await waitForNextUpdate();
-      await result.current.fetch(FutureArticleResource.create(), {
-        id: 1,
-      });
-      expect(result.current.articles.map(({ id }) => id)).toEqual([1, 5, 3]);
+      const endpoint = FutureArticleResource.create();
+      const response: ResolveType<typeof endpoint> = createPayload;
+      const fixtures: FixtureEndpoint[] = [
+        {
+          endpoint,
+          args: [{ id: 1 }],
+          response,
+        },
+      ];
+      // use nock, and use resolver
+      for (const resolverFixtures of [undefined, fixtures]) {
+        const { result, waitForNextUpdate } = renderRestHook(
+          () => {
+            const articles = useResource(FutureArticleResource.list(), {});
+            const fetch = useFetcher();
+            return { articles, fetch };
+          },
+          { resolverFixtures },
+        );
+        await waitForNextUpdate();
+        await result.current.fetch(FutureArticleResource.create(), {
+          id: 1,
+        });
+        expect(result.current.articles.map(({ id }) => id)).toEqual([1, 5, 3]);
+      }
     });
   });
 }

packages/test/src/MockResolver.tsx

@@ -11,6 +11,7 @@ import { Fixture, actionFromFixture } from '@rest-hooks/test/mockState';
 type Props = {
   children: React.ReactNode;
   fixtures: Fixture[];
+  silenceMissing: boolean;
 };
 
 /** Can be used to mock responses based on fixtures provided.
@@ -19,7 +20,11 @@ type Props = {
  *
  * Place below <CacheProvider /> and above any components you want to mock.
  */
-export default function MockResolver({ children, fixtures }: Props) {
+export default function MockResolver({
+  children,
+  fixtures,
+  silenceMissing,
+}: Props) {
   const fetchToReceiveAction = useMemo(() => {
     const actionMap: Record<string, ReceiveAction> = {};
     for (const fixture of fixtures) {
@@ -49,9 +54,10 @@ export default function MockResolver({ children, fixtures }: Props) {
           }, 0);
           return Promise.resolve();
         }
-        // This is only a warn because sometimes this is intentional
-        console.warn(
-          `<MockResolver/> received a dispatch:
+        if (!silenceMissing) {
+          // This is only a warn because sometimes this is intentional
+          console.warn(
+            `<MockResolver/> received a dispatch:
   ${JSON.stringify(action, undefined, 2)}
   for which there is no matching fixture.
 
@@ -67,7 +73,8 @@ export default function MockResolver({ children, fixtures }: Props) {
   params: { maxResults: 10 },
   result: [],
   }`,
-        );
+          );
+        }
       } else if (action.type === actionTypes.SUBSCRIBE_TYPE) {
         const { key } = action.meta;
         if (Object.prototype.hasOwnProperty.call(fetchToReceiveAction, key)) {
@@ -76,7 +83,7 @@ export default function MockResolver({ children, fixtures }: Props) {
       }
       return dispatch(action);
     },
-    [fetchToReceiveAction, dispatch],
+    [dispatch, fetchToReceiveAction, silenceMissing],
   );
 
   return (
@@ -85,3 +92,7 @@ export default function MockResolver({ children, fixtures }: Props) {
     </DispatchContext.Provider>
   );
 }
+
+MockResolver.defaultProps = {
+  silenceMissing: false,
+};

packages/test/src/index.ts

@@ -8,6 +8,9 @@ import mockInitialState from '@rest-hooks/test/mockState';
 export * from '@rest-hooks/test/managers';
 export { default as MockResolver } from '@rest-hooks/test/MockResolver';
 export type {
+  FixtureEndpoint,
+  SuccessFixtureEndpoint,
+  ErrorFixtureEndpoint,
   Fixture,
   SuccessFixture,
   ErrorFixture,