feat(hooks): introduce <Configure> (#3261)

Author: francoischalifour

examples/hooks-ssr/src/App.js

@@ -3,14 +3,14 @@ import {
   InstantSearch,
   InstantSearchSSRProvider,
   Index,
+  Configure,
 } from 'react-instantsearch-hooks';
 import { simple } from 'instantsearch.js/es/lib/stateMappings';
 import { history } from 'instantsearch.js/es/lib/routers';
 
 import { searchClient } from './searchClient';
 
 import {
-  Configure,
   Highlight,
   Hits,
   Pagination,

examples/hooks-ssr/src/components/Configure.js

@@ -1,11 +1,14 @@
 import { Hit as AlgoliaHit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch/lite';
 import React from 'react';
-import { InstantSearch, DynamicWidgets } from 'react-instantsearch-hooks';
+import {
+  InstantSearch,
+  Configure,
+  DynamicWidgets,
+} from 'react-instantsearch-hooks';
 
 import {
   ClearRefinements,
-  Configure,
   CurrentRefinements,
   HierarchicalMenu,
   Highlight,

examples/hooks/App.tsx

@@ -1,5 +1,4 @@
 export * from './ClearRefinements';
-export * from './Configure';
 export * from './CurrentRefinements';
 export * from './HierarchicalMenu';
 export * from './Highlight';

examples/hooks/components/index.ts

@@ -1,4 +1,6 @@
-import { useConfigure, UseConfigureProps } from 'react-instantsearch-hooks';
+import { useConfigure } from '../connectors/useConfigure';
+
+import type { UseConfigureProps } from '../connectors/useConfigure';
 
 export type ConfigureProps = UseConfigureProps;
 

examples/hooks/components/Configure.tsx renamed to packages/react-instantsearch-hooks/src/components/Configure.tsx

@@ -0,0 +1,44 @@
+import { act, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { createSearchClient } from '../../../../../test/mock';
+import { Configure } from '../Configure';
+import { InstantSearch } from '../InstantSearch';
+
+describe('Configure', () => {
+  test('does not render anything', () => {
+    const searchClient = createSearchClient();
+
+    const { container } = render(
+      <InstantSearch indexName="indexName" searchClient={searchClient}>
+        <Configure hitsPerPage={666} />
+      </InstantSearch>
+    );
+
+    expect(container).toMatchInlineSnapshot(`<div />`);
+  });
+
+  test('sets search parameters', async () => {
+    const searchClient = createSearchClient();
+
+    act(() => {
+      render(
+        <InstantSearch indexName="indexName" searchClient={searchClient}>
+          <Configure hitsPerPage={666} />
+        </InstantSearch>
+      );
+    });
+
+    await waitFor(() => {
+      expect(searchClient.search).toHaveBeenCalledTimes(1);
+      expect(searchClient.search).toHaveBeenCalledWith([
+        {
+          indexName: 'indexName',
+          params: expect.objectContaining({
+            hitsPerPage: 666,
+          }),
+        },
+      ]);
+    });
+  });
+});

packages/react-instantsearch-hooks/src/components/__tests__/Configure.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import React, { createRef } from 'react';
 
 import { createSearchClient } from '../../../../../test/mock';
-import { useConfigure } from '../../connectors/useConfigure';
+import { Configure } from '../../components/Configure';
 import { IndexContext } from '../../lib/IndexContext';
 import { noop } from '../../lib/noop';
 import { Index } from '../Index';
@@ -11,11 +11,6 @@ import { InstantSearchSSRProvider } from '../InstantSearchSSRProvider';
 
 import type { IndexWidget } from 'instantsearch.js/es/widgets/index/index';
 
-function Configure(props) {
-  useConfigure(props);
-  return null;
-}
-
 describe('Index', () => {
   test('throws when used outside of <InstantSearch>', () => {
     // Hide the errors from the test logs.

packages/react-instantsearch-hooks/src/components/__tests__/Index.test.tsx

@@ -1,4 +1,5 @@
 export { default as version } from './version';
+export * from './components/Configure';
 export * from './components/DynamicWidgets';
 export * from './components/Index';
 export * from './components/InstantSearch';