enhance: Add renderDataHook export (#3238)

Author: ntucker

.changeset/brown-crews-impress.md

@@ -0,0 +1,26 @@
+---
+'@data-client/test': patch
+---
+
+Add renderDataHook() export
+
+This can be used instead of `makeRenderDataHook(DataProvider)`
+
+```ts
+import { renderDataHook } from '@data-client/test';
+
+const { result, waitFor } = renderDataHook(
+  () => {
+    return useSuspense(ArticleResource.get, { id: 5 });
+  },
+  {
+    initialFixtures: [
+      {
+        endpoint: ArticleResource.get,
+        args: [{ id: 5 }],
+        response,
+      },
+    ],
+  },
+);
+```

.changeset/gorgeous-dingos-push.md

@@ -0,0 +1,6 @@
+---
+'@data-client/react': patch
+'@data-client/test': patch
+---
+
+Update test docs link

.changeset/wild-elephants-act.md

@@ -0,0 +1,5 @@
+---
+'@data-client/test': patch
+---
+
+makeRenderDataClient() -> makeRenderDataHook() (but keep the old name still)

README.md

@@ -348,7 +348,7 @@ For the small price of 9kb gziped.    [🏁Get started now](https://da
   </table>
 
 - Components: [&lt;DataProvider/>](https://dataclient.io/docs/api/DataProvider), [&lt;AsyncBoundary/>](https://dataclient.io/docs/api/AsyncBoundary), [&lt;ErrorBoundary/>](https://dataclient.io/docs/api/ErrorBoundary), [&lt;MockResolver/>](https://dataclient.io/docs/api/MockResolver)
-- Data Mocking: [Fixture](https://dataclient.io/docs/api/Fixtures#successfixture), [Interceptor](https://dataclient.io/docs/api/Fixtures#interceptor), [renderDataClient()](https://dataclient.io/docs/api/makeRenderDataClient)
+- Data Mocking: [Fixture](https://dataclient.io/docs/api/Fixtures#successfixture), [Interceptor](https://dataclient.io/docs/api/Fixtures#interceptor), [renderDataHook()](https://dataclient.io/docs/api/renderDataHook)
 - Middleware: [LogoutManager](https://dataclient.io/docs/api/LogoutManager), [NetworkManager](https://dataclient.io/docs/api/NetworkManager), [SubscriptionManager](https://dataclient.io/docs/api/SubscriptionManager), [PollingSubscription](https://dataclient.io/docs/api/PollingSubscription), [DevToolsManager](https://dataclient.io/docs/api/DevToolsManager)
 
 ### [Define Data](https://dataclient.io/docs/getting-started/resource)

docs/core/README.md

@@ -618,7 +618,7 @@ const incrementInterceptor: Interceptor = {
 </Tabs>
 
 - [Mock data for storybook](./guides/storybook.md) with [MockResolver](./api/MockResolver.md)
-- [Test hooks](./guides/unit-testing-hooks.md) with [makeRenderDataClient()](./api/makeRenderDataClient.md)
+- [Test hooks](./guides/unit-testing-hooks.md) with [renderDataHook()](./api/renderDataHook.md)
 - [Test components](./guides/unit-testing-components.md) with [MockResolver](./api/MockResolver.md) and [mockInitialState()](./api/mockInitialState.md)
 
 ## Demo

docs/core/api/Controller.md

@@ -22,7 +22,7 @@ and retrieval performance.
 
 - [Managers](./Manager.md) as the first argument in [Manager.middleware](./Manager.md#middleware)
 - React with [useController()](./useController.md)
-- [Unit testing hooks](../guides/unit-testing-hooks.md) with [renderDataClient()](./makeRenderDataClient.md#controller)
+- [Unit testing hooks](../guides/unit-testing-hooks.md) with [renderDataHook()](./renderDataHook.md#controller)
 
 ```ts
 class Controller {

docs/core/api/makeRenderDataHook.md

@@ -0,0 +1,81 @@
+---
+title: makeRenderDataHook()
+---
+
+```typescript
+function makeRenderDataHook(
+  Provider: React.ComponentType<ProviderProps>,
+): RenderDataClientFunction;
+```
+
+`makeRenderDataHook()` is useful to test hooks that rely on the `Reactive Data Client`. It creates a renderDataClient()
+function that mirrors [@testing-library/react-hooks](https://github.com/testing-library/react-hooks-testing-library)'s [renderHook()](https://react-hooks-testing-library.com/reference/api#renderhook-options) but does so with a `<Suspense/>` boundary
+as well as in a `<Provider />` context.
+
+## Arguments
+
+### Provider
+
+```typescript
+interface ProviderProps {
+  children: React.ReactNode;
+  managers: Manager[];
+  initialState: State<unknown>;
+  Controller: typeof Controller;
+}
+```
+
+The Reactive Data Client [&lt;DataProvider /&gt;](./DataProvider.md)
+
+- `import { DataProvider } from @data-client/react;`
+- `import { DataProvider } from @data-client/react/redux;`
+
+## Example
+
+
+```typescript
+import { DataProvider } from '@data-client/react/redux';
+import { makeRenderDataHook } from '@data-client/test';
+
+const response = {
+  id: 5,
+  title: 'hi ho',
+  content: 'whatever',
+  tags: ['a', 'best', 'react'],
+};
+
+beforeEach(() => {
+  renderDataHook = makeRenderDataHook(DataProvider);
+});
+
+it('should resolve useSuspense()', async () => {
+  const { result, waitFor } = renderDataHook(
+    () => {
+      return useSuspense(ArticleResource.get, response);
+    },
+    {
+      resolverFixtures: [
+        {
+          endpoint: ArticleResource.get,
+          response: ({ id }) => ({ ...response, id }),
+        },
+        {
+          endpoint: ArticleResource.partialUpdate,
+          response: ({ id }, body) => ({ ...body, id }),
+        },
+      ],
+    },
+  );
+  // this indicates suspense
+  expect(result.current).toBeUndefined();
+  await waitFor(() => expect(result.current).toBeDefined());
+  expect(result.current instanceof ArticleResource).toBe(true);
+  expect(result.current.title).toBe(response.title);
+  await controller.fetch(
+    ArticleResource.partialUpdate,
+    { id: response.id },
+    { title: 'updated title' },
+  );
+  expect(result.current.title).toBe('updated title');
+});
+```