fix(configure): pass the latest state to onStateChange (#4555)

* fix(configure): pass the latest state to onStateChange

* chore: rename tests

src/connectors/configure/connectConfigure.ts

@@ -88,11 +88,11 @@ const connectConfigure: ConfigureConnector = function connectConfigure(
           new algoliasearchHelper.SearchParameters(searchParameters)
         );
 
-        // Trigger a search with the resolved search parameters
-        helper.setState(nextSearchParameters).search();
-
         // Update original `widgetParams.searchParameters` to the new refined one
         widgetParams.searchParameters = searchParameters;
+
+        // Trigger a search with the resolved search parameters
+        helper.setState(nextSearchParameters).search();
       };
     }
 

src/lib/__tests__/InstantSearch-integration-test.ts

@@ -0,0 +1,46 @@
+import { getByText, fireEvent } from '@testing-library/dom';
+import instantsearch from '../../index.es';
+import { configure } from '../../widgets';
+import { connectConfigure } from '../../connectors';
+import { createSearchClient } from '../../../test/mock/createSearchClient';
+
+describe('configure', () => {
+  it('provides up-to-date uiState to onStateChange', () => {
+    const container = document.createElement('div');
+    const onStateChange = jest.fn();
+    const search = instantsearch({
+      indexName: 'instant_search',
+      searchClient: createSearchClient(),
+      onStateChange({ uiState, setUiState }) {
+        onStateChange(uiState);
+        setUiState(uiState);
+      },
+    });
+    const customComp = connectConfigure(({ refine }, isFirstRendering) => {
+      if (isFirstRendering) {
+        const button = document.createElement('button');
+        button.setAttribute('type', 'button');
+        button.textContent = 'click me';
+        container.appendChild(button);
+        container.querySelector('button')!.addEventListener('click', () => {
+          refine({ hitsPerPage: 4 });
+        });
+      }
+    });
+    search.addWidgets([
+      configure({
+        hitsPerPage: 10,
+      }),
+      customComp({ searchParameters: {} }),
+    ]);
+
+    search.start();
+    expect(onStateChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByText(container, 'click me'));
+    expect(onStateChange).toHaveBeenCalledTimes(1);
+    expect(onStateChange).toHaveBeenCalledWith({
+      instant_search: { configure: { hitsPerPage: 4 } },
+    });
+  });
+});