From bc69429cd0bebcb0779a6c9b5c94fe7e21b2284e Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Thu, 16 Mar 2023 10:10:53 +0100
Subject: [PATCH] fix(insights): user-defined send/bindEvent overrides internal
 click (#5527)

* fix(insights): prevent duplicate events

in sendEvent, we mark internal events (click and conversion), and prevent them being sent if there was a custom click right before.

Note that this doesn't yet work with bindEvent, as it's higher in the bubbling tree

* fix(internal): bail out of default click if element has a bindEvent parent

* test

* fix: only prevent next clicks after a regular click

* bundlesize

* test(infiniteHits): add sendEvent tests

same idea as this test in hits-integration-test.ts

* wip infinite hits

* move bindEvent click listener

people can't bind events higher anyway, so this is safe to do

* refactor: move dedupe into middleware

this allows the dedupe to work for both bindEvent and sendEvent in a single codebase.

Tiny aside: this means that the "next internal click" is now global, meaning if you click on geo, then on hits, we'll see that as an internal click to prevent sending. This is an extreme edge case, as almost nowhere sends click events.

* fix(events): move back inside connector

this prevents a custom blocking an internal in a different widget

* get rid of global cruft

* refactor: use timers instead of order-based ignoring

* test(common): insights clicks + view for hits + infinitehits

* fix(react): send an internal event

* PR feedback

* internal
---
 bundlesize.config.json                        |   8 +-
 .../src/__tests__/common.test.tsx             | 111 ++++
 .../src/components/Hits/Hits.tsx              |   7 +-
 .../components/Hits/__tests__/Hits.test.tsx   |   2 +-
 .../__snapshots__/Hits-test.tsx.snap          |   2 -
 .../components/InfiniteHits/InfiniteHits.tsx  |   7 +-
 .../__tests__/InfiniteHits.test.tsx           |   2 +-
 .../__tests__/insights-listener-test.tsx      |   6 +-
 .../src/lib/utils/createSendEventForHits.ts   | 136 ++--
 .../hits/__tests__/hits-integration-test.ts   |  52 +-
 .../infinite-hits-integration-test.ts         | 152 ++++-
 .../src/__tests__/common.test.tsx             | 116 +++-
 .../src/ui/Hits.tsx                           |   2 +-
 .../src/ui/InfiniteHits.tsx                   |   2 +-
 .../src/ui/__tests__/Hits.test.tsx            |   2 +-
 .../src/ui/__tests__/InfiniteHits.test.tsx    |   2 +-
 .../src/__tests__/common.test.js              | 189 +++++-
 tests/common/index.ts                         |   1 +
 tests/common/widgets/hits/index.ts            |  24 +
 tests/common/widgets/hits/insights.ts         | 584 ++++++++++++++++++
 tests/common/widgets/infinite-hits/index.ts   |   6 +-
 .../common/widgets/infinite-hits/insights.ts  | 584 ++++++++++++++++++
 .../widgets/infinite-hits/optimistic-ui.ts    |  34 +-
 23 files changed, 1906 insertions(+), 125 deletions(-)
 create mode 100644 tests/common/widgets/hits/index.ts
 create mode 100644 tests/common/widgets/hits/insights.ts
 create mode 100644 tests/common/widgets/infinite-hits/insights.ts

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 469564c6f5..27c887d214 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "packages/react-instantsearch-hooks/dist/umd/ReactInstantSearchHooks.min.js",
-      "maxSize": "43 kB"
+      "maxSize": "43.25 kB"
     },
     {
       "path": "packages/react-instantsearch-hooks-web/dist/umd/ReactInstantSearchHooksDOM.min.js",
-      "maxSize": "52.50 kB"
+      "maxSize": "52.75 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
@@ -42,11 +42,11 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "61.25 kB"
+      "maxSize": "61.50 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "61.25 kB"
+      "maxSize": "61.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",
diff --git a/packages/instantsearch.js/src/__tests__/common.test.tsx b/packages/instantsearch.js/src/__tests__/common.test.tsx
index bc51c2ebe3..e193213942 100644
--- a/packages/instantsearch.js/src/__tests__/common.test.tsx
+++ b/packages/instantsearch.js/src/__tests__/common.test.tsx
@@ -8,6 +8,7 @@ import {
   createPaginationTests,
   createMenuTests,
   createInfiniteHitsTests,
+  createHitsTests,
 } from '@instantsearch/tests';
 
 import instantsearch from '../index.es';
@@ -19,6 +20,8 @@ import {
   pagination,
   infiniteHits,
   searchBox,
+  hits,
+  index,
 } from '../widgets';
 
 createHierarchicalMenuTests(({ instantSearchOptions, widgetParams }) => {
@@ -120,9 +123,117 @@ createInfiniteHitsTests(({ instantSearchOptions, widgetParams }) => {
         container: document.body.appendChild(document.createElement('div')),
       }),
       infiniteHits({
+        container: document.body.appendChild(
+          Object.assign(document.createElement('div'), {
+            id: 'main-hits',
+          })
+        ),
+        templates: {
+          item: (hit, { html, sendEvent }) =>
+            html`<div data-testid=${`main-hits-top-level-${hit.__position}`}>
+              ${hit.objectID}
+              <button
+                data-testid=${`main-hits-convert-${hit.__position}`}
+                onClick=${() => sendEvent('conversion', hit, 'Converted')}
+              >
+                convert
+              </button>
+              <button
+                data-testid=${`main-hits-click-${hit.__position}`}
+                onClick=${() => sendEvent('click', hit, 'Clicked')}
+              >
+                click
+              </button>
+            </div>`,
+        },
+        ...widgetParams,
+      }),
+      index({ indexName: 'nested' }).addWidgets([
+        infiniteHits({
+          container: document.body.appendChild(
+            Object.assign(document.createElement('div'), {
+              id: 'nested-hits',
+            })
+          ),
+          templates: {
+            item: (hit, { html, sendEvent }) =>
+              html`<div
+                data-testid=${`nested-hits-top-level-${hit.__position}`}
+              >
+                ${hit.objectID}
+                <button
+                  data-testid=${`nested-hits-click-${hit.__position}`}
+                  onClick=${() => sendEvent('click', hit, 'Clicked nested')}
+                >
+                  click
+                </button>
+              </div>`,
+          },
+        }),
+      ]),
+    ])
+    .on('error', () => {
+      /*
+       * prevent rethrowing InstantSearch errors, so tests can be asserted.
+       * IRL this isn't needed, as the error doesn't stop execution.
+       */
+    })
+    .start();
+});
+
+createHitsTests(({ instantSearchOptions, widgetParams }) => {
+  instantsearch(instantSearchOptions)
+    .addWidgets([
+      searchBox({
         container: document.body.appendChild(document.createElement('div')),
+      }),
+      hits({
+        container: document.body.appendChild(
+          Object.assign(document.createElement('div'), {
+            id: 'main-hits',
+          })
+        ),
+        templates: {
+          item: (hit, { html, sendEvent }) =>
+            html`<div data-testid=${`main-hits-top-level-${hit.__position}`}>
+              ${hit.objectID}
+              <button
+                data-testid=${`main-hits-convert-${hit.__position}`}
+                onClick=${() => sendEvent('conversion', hit, 'Converted')}
+              >
+                convert
+              </button>
+              <button
+                data-testid=${`main-hits-click-${hit.__position}`}
+                onClick=${() => sendEvent('click', hit, 'Clicked')}
+              >
+                click
+              </button>
+            </div>`,
+        },
         ...widgetParams,
       }),
+      index({ indexName: 'nested' }).addWidgets([
+        hits({
+          container: document.body.appendChild(
+            Object.assign(document.createElement('div'), {
+              id: 'nested-hits',
+            })
+          ),
+          templates: {
+            item: (hit, { html, sendEvent }) =>
+              html`<div data-testid=${`nested-hits-${hit.__position}`}>
+                ${hit.objectID}
+                <button
+                  data-testid=${`nested-hits-click-${hit.__position}`}
+                  onClick=${() => sendEvent('click', hit, 'Clicked nested')}
+                >
+                  click
+                </button>
+              </div>`,
+          },
+        }),
+      ]),
     ])
     .on('error', () => {
       /*
diff --git a/packages/instantsearch.js/src/components/Hits/Hits.tsx b/packages/instantsearch.js/src/components/Hits/Hits.tsx
index c4be9ae42f..cbad18527e 100644
--- a/packages/instantsearch.js/src/components/Hits/Hits.tsx
+++ b/packages/instantsearch.js/src/components/Hits/Hits.tsx
@@ -55,7 +55,7 @@ export default function Hits({
   }
 
   return (
-    <div className={cssClasses.root} onClick={handleInsightsClick}>
+    <div className={cssClasses.root}>
       <ol className={cssClasses.list}>
         {hits.map((hit, index) => (
           <Template
@@ -64,8 +64,9 @@ export default function Hits({
             rootTagName="li"
             rootProps={{
               className: cssClasses.item,
-              onClick: () => {
-                sendEvent('click', hit, 'Hit Clicked');
+              onClick: (event: MouseEvent) => {
+                handleInsightsClick(event);
+                sendEvent('click:internal', hit, 'Hit Clicked');
               },
             }}
             key={hit.objectID}
diff --git a/packages/instantsearch.js/src/components/Hits/__tests__/Hits.test.tsx b/packages/instantsearch.js/src/components/Hits/__tests__/Hits.test.tsx
index 9fa5687255..00ce6cf9db 100644
--- a/packages/instantsearch.js/src/components/Hits/__tests__/Hits.test.tsx
+++ b/packages/instantsearch.js/src/components/Hits/__tests__/Hits.test.tsx
@@ -28,7 +28,7 @@ describe('Hits', () => {
 
     expect(props.sendEvent).toHaveBeenCalledTimes(1);
     expect(props.sendEvent).toHaveBeenLastCalledWith(
-      'click',
+      'click:internal',
       props.hits[0],
       'Hit Clicked'
     );
diff --git a/packages/instantsearch.js/src/components/Hits/__tests__/__snapshots__/Hits-test.tsx.snap b/packages/instantsearch.js/src/components/Hits/__tests__/__snapshots__/Hits-test.tsx.snap
index 3005f06c1d..7ad85275e9 100644
--- a/packages/instantsearch.js/src/components/Hits/__tests__/__snapshots__/Hits-test.tsx.snap
+++ b/packages/instantsearch.js/src/components/Hits/__tests__/__snapshots__/Hits-test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Hits markup should render <Hits /> 1`] = `
 <div
   className="root"
-  onClick={[Function]}
 >
   <ol
     className="list"
@@ -33,7 +32,6 @@ exports[`Hits markup should render <Hits /> 1`] = `
 exports[`Hits markup should render <Hits /> without highlight function 1`] = `
 <div
   className="root"
-  onClick={[Function]}
 >
   <ol
     className="list"
diff --git a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx
index 7997ce73f6..ea563b6452 100644
--- a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx
+++ b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx
@@ -71,7 +71,7 @@ const InfiniteHits = ({
   }
 
   return (
-    <div className={cssClasses.root} onClick={handleInsightsClick}>
+    <div className={cssClasses.root}>
       {hasShowPrevious && (
         <Template
           {...templateProps}
@@ -96,8 +96,9 @@ const InfiniteHits = ({
             rootTagName="li"
             rootProps={{
               className: cssClasses.item,
-              onClick: () => {
-                sendEvent('click', hit, 'Hit Clicked');
+              onClick: (event: MouseEvent) => {
+                handleInsightsClick(event);
+                sendEvent('click:internal', hit, 'Hit Clicked');
               },
             }}
             key={hit.objectID}
diff --git a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx
index ca3411aeb0..d3f7b456c2 100644
--- a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx
+++ b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx
@@ -28,7 +28,7 @@ describe('InfiniteHits', () => {
 
     expect(props.sendEvent).toHaveBeenCalledTimes(1);
     expect(props.sendEvent).toHaveBeenLastCalledWith(
-      'click',
+      'click:internal',
       props.hits[0],
       'Hit Clicked'
     );
diff --git a/packages/instantsearch.js/src/lib/insights/__tests__/insights-listener-test.tsx b/packages/instantsearch.js/src/lib/insights/__tests__/insights-listener-test.tsx
index 811560f9fd..24ab8267c0 100644
--- a/packages/instantsearch.js/src/lib/insights/__tests__/insights-listener-test.tsx
+++ b/packages/instantsearch.js/src/lib/insights/__tests__/insights-listener-test.tsx
@@ -132,7 +132,7 @@ describe('createInsightsEventHandler', () => {
           instantSearchInstance: createInstantSearch(),
           methodName: 'bindEvent',
           args: ['click', { objectID: '1', __position: 1 }, 'Hit Clicked'],
-        })
+        }).payloads
       );
 
       const Hits = (props: InsightsEventHandlerOptions) => (
@@ -176,7 +176,7 @@ describe('createInsightsEventHandler', () => {
           instantSearchInstance: createInstantSearch(),
           methodName: 'bindEvent',
           args: ['click', { objectID: '1', __position: 1 }, 'Hit Clicked'],
-        })
+        }).payloads
       );
 
       const Hits = (props: InsightsEventHandlerOptions) => (
@@ -250,7 +250,7 @@ describe('createInsightsEventHandler', () => {
           instantSearchInstance: createInstantSearch(),
           methodName: 'bindEvent',
           args: ['click', { objectID: '1', __position: 1 }, 'Product Clicked'],
-        })
+        }).payloads
       );
 
       const Hits = (props: InsightsEventHandlerOptions) => (
diff --git a/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts b/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts
index 802fb63b22..8501a97e03 100644
--- a/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts
+++ b/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts
@@ -41,12 +41,16 @@ export function _buildEventPayloadsForHits({
   methodName: 'sendEvent' | 'bindEvent';
   args: any[];
   instantSearchInstance: InstantSearch;
-}): InsightsEvent[] {
+}): {
+  payloads: InsightsEvent[];
+  eventModifier?: string;
+} {
   // when there's only one argument, that means it's custom
   if (args.length === 1 && typeof args[0] === 'object') {
-    return [args[0]];
+    return { payloads: [args[0]] };
   }
-  const eventType: string = args[0];
+  const [eventType, eventModifier]: [string, string] = args[0].split(':');
+
   const hits: Hit | Hit[] | EscapedHits = args[1];
   const eventName: string | undefined = args[2];
   if (!hits) {
@@ -57,7 +61,7 @@ export function _buildEventPayloadsForHits({
   `
       );
     } else {
-      return [];
+      return { payloads: [] };
     }
   }
   if ((eventType === 'click' || eventType === 'conversion') && !eventName) {
@@ -70,13 +74,13 @@ export function _buildEventPayloadsForHits({
   `
       );
     } else {
-      return [];
+      return { payloads: [] };
     }
   }
   const hitsArray: Hit[] = Array.isArray(hits) ? hits : [hits];
 
   if (hitsArray.length === 0) {
-    return [];
+    return { payloads: [] };
   }
   const queryID = hitsArray[0].__queryID;
   const hitsChunks = chunk(hitsArray);
@@ -89,58 +93,67 @@ export function _buildEventPayloadsForHits({
 
   if (eventType === 'view') {
     if (instantSearchInstance.status !== 'idle') {
-      return [];
+      return { payloads: [] };
     }
-    return hitsChunks.map((batch, i) => {
-      return {
-        insightsMethod: 'viewedObjectIDs',
-        widgetType,
-        eventType,
-        payload: {
-          eventName: eventName || 'Hits Viewed',
-          index,
-          objectIDs: objectIDsByChunk[i],
-        },
-        hits: batch,
-      };
-    });
+    return {
+      payloads: hitsChunks.map((batch, i) => {
+        return {
+          insightsMethod: 'viewedObjectIDs',
+          widgetType,
+          eventType,
+          payload: {
+            eventName: eventName || 'Hits Viewed',
+            index,
+            objectIDs: objectIDsByChunk[i],
+          },
+          hits: batch,
+        };
+      }),
+      eventModifier,
+    };
   } else if (eventType === 'click') {
-    return hitsChunks.map((batch, i) => {
-      return {
-        insightsMethod: 'clickedObjectIDsAfterSearch',
-        widgetType,
-        eventType,
-        payload: {
-          eventName,
-          index,
-          queryID,
-          objectIDs: objectIDsByChunk[i],
-          positions: positionsByChunk[i],
-        },
-        hits: batch,
-      };
-    });
+    return {
+      payloads: hitsChunks.map((batch, i) => {
+        return {
+          insightsMethod: 'clickedObjectIDsAfterSearch',
+          widgetType,
+          eventType,
+          payload: {
+            eventName,
+            index,
+            queryID,
+            objectIDs: objectIDsByChunk[i],
+            positions: positionsByChunk[i],
+          },
+          hits: batch,
+        };
+      }),
+      eventModifier,
+    };
   } else if (eventType === 'conversion') {
-    return hitsChunks.map((batch, i) => {
-      return {
-        insightsMethod: 'convertedObjectIDsAfterSearch',
-        widgetType,
-        eventType,
-        payload: {
-          eventName,
-          index,
-          queryID,
-          objectIDs: objectIDsByChunk[i],
-        },
-        hits: batch,
-      };
-    });
+    return {
+      payloads: hitsChunks.map((batch, i) => {
+        return {
+          insightsMethod: 'convertedObjectIDsAfterSearch',
+          widgetType,
+          eventType,
+          payload: {
+            eventName,
+            index,
+            queryID,
+            objectIDs: objectIDsByChunk[i],
+          },
+          hits: batch,
+        };
+      }),
+      eventModifier,
+    };
   } else if (__DEV__) {
     throw new Error(`eventType("${eventType}") is not supported.
     If you want to send a custom payload, you can pass one object: ${methodName}(customPayload);
     `);
   } else {
-    return [];
+    return { payloads: [] };
   }
 }
 
@@ -153,8 +166,11 @@ export function createSendEventForHits({
   index: string;
   widgetType: string;
 }): SendEventForHits {
+  let sentEvents: Record<InsightsEvent['eventType'], boolean> = {};
+  let timer: ReturnType<typeof setTimeout> | undefined = undefined;
+
   const sendEventForHits: SendEventForHits = (...args: any[]) => {
-    const payloads = _buildEventPayloadsForHits({
+    const { payloads, eventModifier } = _buildEventPayloadsForHits({
       widgetType,
       index,
       methodName: 'sendEvent',
@@ -162,9 +178,19 @@ export function createSendEventForHits({
       instantSearchInstance,
     });
 
-    payloads.forEach((payload) =>
-      instantSearchInstance.sendEventToInsights(payload)
-    );
+    payloads.forEach((payload) => {
+      if (eventModifier === 'internal' && sentEvents[payload.eventType]) {
+        return;
+      }
+
+      sentEvents[payload.eventType] = true;
+      instantSearchInstance.sendEventToInsights(payload);
+    });
+
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      sentEvents = {};
+    }, 0);
   };
   return sendEventForHits;
 }
@@ -179,7 +205,7 @@ export function createBindEventForHits({
   instantSearchInstance: InstantSearch;
 }): BindEventForHits {
   const bindEventForHits: BindEventForHits = (...args: any[]) => {
-    const payloads = _buildEventPayloadsForHits({
+    const { payloads } = _buildEventPayloadsForHits({
       widgetType,
       index,
       methodName: 'bindEvent',
diff --git a/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts b/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts
index 2253c386d6..33333074b8 100644
--- a/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts
+++ b/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts
@@ -190,8 +190,8 @@ describe('hits', () => {
 
       fireEvent.click(getByText(container, 'title 1'));
 
-      // The default `click` one + the custom one
-      expect(onEvent).toHaveBeenCalledTimes(2);
+      // The custom one only
+      expect(onEvent).toHaveBeenCalledTimes(1);
       expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'click',
         hits: [
@@ -242,7 +242,7 @@ describe('hits', () => {
       onEvent.mockClear();
 
       fireEvent.click(getByText(container, 'title 2'));
-      // The default `click` one + the custom one
+      // The custom one + default click
       expect(onEvent).toHaveBeenCalledTimes(2);
       expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'conversion',
@@ -262,6 +262,24 @@ describe('hits', () => {
         },
         widgetType: 'ais.hits',
       });
+      expect(onEvent.mock.calls[1][0]).toEqual({
+        eventType: 'click',
+        hits: [
+          {
+            __position: 2,
+            objectID: 'object-id1',
+            title: 'title 2',
+          },
+        ],
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Hit Clicked',
+          index: 'instant_search',
+          objectIDs: ['object-id1'],
+          positions: [2],
+        },
+        widgetType: 'ais.hits',
+      });
     });
 
     it('sends `click` event with `bindEvent`', async () => {
@@ -289,9 +307,9 @@ describe('hits', () => {
       onEvent.mockClear();
 
       fireEvent.click(getByText(container, 'title 1'));
-      // The default `click` one + the custom one
-      expect(onEvent).toHaveBeenCalledTimes(2);
-      expect(onEvent.mock.calls[1][0]).toEqual({
+      // The custom one only
+      expect(onEvent).toHaveBeenCalledTimes(1);
+      expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'click',
         hits: [
           {
@@ -342,9 +360,9 @@ describe('hits', () => {
 
       fireEvent.click(getByText(container, 'title 2'));
 
-      // The default `click` one + the custom one
+      // The custom one + default click
       expect(onEvent).toHaveBeenCalledTimes(2);
-      expect(onEvent.mock.calls[1][0]).toEqual({
+      expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'conversion',
         hits: [
           {
@@ -362,6 +380,24 @@ describe('hits', () => {
         },
         widgetType: 'ais.hits',
       });
+      expect(onEvent.mock.calls[1][0]).toEqual({
+        eventType: 'click',
+        hits: [
+          {
+            __position: 2,
+            objectID: 'object-id1',
+            title: 'title 2',
+          },
+        ],
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Hit Clicked',
+          index: 'instant_search',
+          objectIDs: ['object-id1'],
+          positions: [2],
+        },
+        widgetType: 'ais.hits',
+      });
     });
   });
 
diff --git a/packages/instantsearch.js/src/widgets/infinite-hits/__tests__/infinite-hits-integration-test.ts b/packages/instantsearch.js/src/widgets/infinite-hits/__tests__/infinite-hits-integration-test.ts
index f005ed9445..cccea1420b 100644
--- a/packages/instantsearch.js/src/widgets/infinite-hits/__tests__/infinite-hits-integration-test.ts
+++ b/packages/instantsearch.js/src/widgets/infinite-hits/__tests__/infinite-hits-integration-test.ts
@@ -409,7 +409,127 @@ describe('infiniteHits', () => {
       );
     });
 
-    it('sends click event', async () => {
+    it('sends click event with sendEvent', async () => {
+      const { search } = createInstantSearch();
+      const { insights, onEvent } = createInsightsMiddlewareWithOnEvent();
+      search.use(insights);
+
+      search.addWidgets([
+        infiniteHits({
+          container,
+          templates: {
+            item: (item, { html, sendEvent }) => html`
+              <button
+                type="button"
+                onClick=${() => sendEvent('click', item, 'Item Clicked')}
+              >
+                ${item.title}
+              </button>
+            `,
+          },
+        }),
+      ]);
+      search.start();
+      await wait(0);
+
+      expect(onEvent).toHaveBeenCalledTimes(1); // view event by render
+      onEvent.mockClear();
+
+      fireEvent.click(getByText(container, 'title 1'));
+
+      // The custom one only
+      expect(onEvent).toHaveBeenCalledTimes(1);
+      expect(onEvent.mock.calls[0][0]).toEqual({
+        eventType: 'click',
+        hits: [
+          {
+            __hitIndex: 0,
+            __position: 1,
+            objectID: 'object-id0',
+            title: 'title 1',
+          },
+        ],
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Item Clicked',
+          index: 'instant_search',
+          objectIDs: ['object-id0'],
+          positions: [1],
+        },
+        widgetType: 'ais.infiniteHits',
+      });
+    });
+
+    it('sends conversion event with sendEvent', async () => {
+      const { search } = createInstantSearch();
+      const { insights, onEvent } = createInsightsMiddlewareWithOnEvent();
+      search.use(insights);
+
+      search.addWidgets([
+        infiniteHits({
+          container,
+          templates: {
+            item: (item, { html, sendEvent }) => html`
+              <button
+                type="button"
+                onClick=${() =>
+                  sendEvent('conversion', item, 'Product Ordered')}
+              >
+                ${item.title}
+              </button>
+            `,
+          },
+        }),
+      ]);
+      search.start();
+      await wait(0);
+
+      expect(onEvent).toHaveBeenCalledTimes(1); // view event by render
+      onEvent.mockClear();
+
+      fireEvent.click(getByText(container, 'title 2'));
+
+      // The custom one + the default one
+      expect(onEvent).toHaveBeenCalledTimes(2);
+      expect(onEvent.mock.calls[0][0]).toEqual({
+        eventType: 'conversion',
+        hits: [
+          {
+            __hitIndex: 1,
+            __position: 2,
+            objectID: 'object-id1',
+            title: 'title 2',
+          },
+        ],
+        insightsMethod: 'convertedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Product Ordered',
+          index: 'instant_search',
+          objectIDs: ['object-id1'],
+        },
+        widgetType: 'ais.infiniteHits',
+      });
+      expect(onEvent.mock.calls[1][0]).toEqual({
+        eventType: 'click',
+        hits: [
+          {
+            __position: 2,
+            objectID: 'object-id1',
+            title: 'title 2',
+          },
+        ],
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Hit Clicked',
+          index: 'instant_search',
+          objectIDs: ['object-id1'],
+          positions: [2],
+        },
+        widgetType: 'ais.infiniteHits',
+      });
+    });
+
+    it('sends click event with bindEvent', async () => {
       const { search } = createInstantSearch();
       const { insights, onEvent } = createInsightsMiddlewareWithOnEvent();
       search.use(insights);
@@ -434,9 +554,9 @@ describe('infiniteHits', () => {
 
       fireEvent.click(getByText(container, 'title 1'));
 
-      // The default `click` one + the custom one
-      expect(onEvent).toHaveBeenCalledTimes(2);
-      expect(onEvent.mock.calls[onEvent.mock.calls.length - 1][0]).toEqual({
+      // The custom one only
+      expect(onEvent).toHaveBeenCalledTimes(1);
+      expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'click',
         hits: [
           {
@@ -457,7 +577,7 @@ describe('infiniteHits', () => {
       });
     });
 
-    it('sends conversion event', async () => {
+    it('sends conversion event with bindEvent', async () => {
       const { search } = createInstantSearch();
       const { insights, onEvent } = createInsightsMiddlewareWithOnEvent();
       search.use(insights);
@@ -486,9 +606,9 @@ describe('infiniteHits', () => {
 
       fireEvent.click(getByText(container, 'title 2'));
 
-      // The default `click` one + the custom one
+      // The custom one + the default one
       expect(onEvent).toHaveBeenCalledTimes(2);
-      expect(onEvent.mock.calls[onEvent.mock.calls.length - 1][0]).toEqual({
+      expect(onEvent.mock.calls[0][0]).toEqual({
         eventType: 'conversion',
         hits: [
           {
@@ -506,6 +626,24 @@ describe('infiniteHits', () => {
         },
         widgetType: 'ais.infiniteHits',
       });
+      expect(onEvent.mock.calls[1][0]).toEqual({
+        eventType: 'click',
+        hits: [
+          {
+            __position: 2,
+            objectID: 'object-id1',
+            title: 'title 2',
+          },
+        ],
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Hit Clicked',
+          index: 'instant_search',
+          objectIDs: ['object-id1'],
+          positions: [2],
+        },
+        widgetType: 'ais.infiniteHits',
+      });
     });
   });
 });
diff --git a/packages/react-instantsearch-hooks-web/src/__tests__/common.test.tsx b/packages/react-instantsearch-hooks-web/src/__tests__/common.test.tsx
index 33ca3e065d..fe3f930059 100644
--- a/packages/react-instantsearch-hooks-web/src/__tests__/common.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/__tests__/common.test.tsx
@@ -8,6 +8,7 @@ import {
   createMenuTests,
   createPaginationTests,
   createInfiniteHitsTests,
+  createHitsTests,
 } from '@instantsearch/tests';
 import { act, render } from '@testing-library/react';
 import React from 'react';
@@ -22,8 +23,13 @@ import {
   InfiniteHits,
   SearchBox,
   useInstantSearch,
+  Hits,
+  Index,
 } from '..';
 
+import type { Hit } from 'instantsearch.js';
+import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
+
 /**
  * prevent rethrowing InstantSearch errors, so tests can be asserted.
  * IRL this isn't needed, as the error doesn't stop execution.
@@ -82,10 +88,118 @@ createPaginationTests(({ instantSearchOptions, widgetParams }) => {
 }, act);
 
 createInfiniteHitsTests(({ instantSearchOptions, widgetParams }) => {
+  function MainHit({
+    hit,
+    sendEvent,
+  }: {
+    hit: Hit;
+    sendEvent: SendEventForHits;
+  }) {
+    return (
+      <div data-testid={`main-hits-top-level-${hit.__position}`}>
+        {hit.objectID}
+        <button
+          data-testid={`main-hits-convert-${hit.__position}`}
+          onClick={() => sendEvent('conversion', hit, 'Converted')}
+        >
+          convert
+        </button>
+        <button
+          data-testid={`main-hits-click-${hit.__position}`}
+          onClick={() => sendEvent('click', hit, 'Clicked')}
+        >
+          click
+        </button>
+      </div>
+    );
+  }
+
+  function NestedHit({
+    hit,
+    sendEvent,
+  }: {
+    hit: Hit;
+    sendEvent: SendEventForHits;
+  }) {
+    return (
+      <div data-testid={`nested-hits-${hit.__position}`}>
+        {hit.objectID}
+        <button
+          data-testid={`nested-hits-click-${hit.__position}`}
+          onClick={() => sendEvent('click', hit, 'Clicked nested')}
+        >
+          click
+        </button>
+      </div>
+    );
+  }
+
+  render(
+    <InstantSearch {...instantSearchOptions}>
+      <SearchBox />
+      <InfiniteHits id="main-hits" hitComponent={MainHit} {...widgetParams} />
+      <Index indexName="nested">
+        <InfiniteHits id="nested-hits" hitComponent={NestedHit} />
+      </Index>
+      <GlobalErrorSwallower />
+    </InstantSearch>
+  );
+}, act);
+
+createHitsTests(({ instantSearchOptions, widgetParams }) => {
+  function MainHit({
+    hit,
+    sendEvent,
+  }: {
+    hit: Hit;
+    sendEvent: SendEventForHits;
+  }) {
+    return (
+      <div data-testid={`main-hits-top-level-${hit.__position}`}>
+        {hit.objectID}
+        <button
+          data-testid={`main-hits-convert-${hit.__position}`}
+          onClick={() => sendEvent('conversion', hit, 'Converted')}
+        >
+          convert
+        </button>
+        <button
+          data-testid={`main-hits-click-${hit.__position}`}
+          onClick={() => sendEvent('click', hit, 'Clicked')}
+        >
+          click
+        </button>
+      </div>
+    );
+  }
+
+  function NestedHit({
+    hit,
+    sendEvent,
+  }: {
+    hit: Hit;
+    sendEvent: SendEventForHits;
+  }) {
+    return (
+      <div data-testid={`nested-hits-${hit.__position}`}>
+        {hit.objectID}
+        <button
+          data-testid={`nested-hits-click-${hit.__position}`}
+          onClick={() => sendEvent('click', hit, 'Clicked nested')}
+        >
+          click
+        </button>
+      </div>
+    );
+  }
+
   render(
     <InstantSearch {...instantSearchOptions}>
       <SearchBox />
-      <InfiniteHits {...widgetParams} />
+      <Hits id="main-hits" hitComponent={MainHit} {...widgetParams} />
+      <Index indexName="nested">
+        <Hits id="nested-hits" hitComponent={NestedHit} />
+      </Index>
       <GlobalErrorSwallower />
     </InstantSearch>
   );
diff --git a/packages/react-instantsearch-hooks-web/src/ui/Hits.tsx b/packages/react-instantsearch-hooks-web/src/ui/Hits.tsx
index 4c37544a1a..379110df30 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/Hits.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/Hits.tsx
@@ -65,7 +65,7 @@ export function Hits<THit extends Hit>({
             key={hit.objectID}
             className={cx('ais-Hits-item', classNames.item)}
             onClick={() => {
-              sendEvent('click', hit, 'Hit Clicked');
+              sendEvent('click:internal', hit, 'Hit Clicked');
             }}
           >
             <HitComponent hit={hit} sendEvent={sendEvent} />
diff --git a/packages/react-instantsearch-hooks-web/src/ui/InfiniteHits.tsx b/packages/react-instantsearch-hooks-web/src/ui/InfiniteHits.tsx
index edf2f4ce17..82b9371b56 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/InfiniteHits.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/InfiniteHits.tsx
@@ -114,7 +114,7 @@ export function InfiniteHits<THit extends Hit>({
             key={hit.objectID}
             className={cx('ais-InfiniteHits-item', classNames.item)}
             onClick={() => {
-              sendEvent('click', hit, 'Hit Clicked');
+              sendEvent('click:internal', hit, 'Hit Clicked');
             }}
           >
             <HitComponent hit={hit} sendEvent={sendEvent} />
diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/Hits.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/Hits.test.tsx
index 16fd8a15b6..b2bb0ce420 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/Hits.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/__tests__/Hits.test.tsx
@@ -211,7 +211,7 @@ describe('Hits', () => {
 
     expect(props.sendEvent).toHaveBeenCalledTimes(1);
     expect(props.sendEvent).toHaveBeenLastCalledWith(
-      'click',
+      'click:internal',
       props.hits[0],
       'Hit Clicked'
     );
diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/InfiniteHits.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/InfiniteHits.test.tsx
index 51aa8d61d1..2325d2876c 100644
--- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/InfiniteHits.test.tsx
+++ b/packages/react-instantsearch-hooks-web/src/ui/__tests__/InfiniteHits.test.tsx
@@ -406,7 +406,7 @@ describe('InfiniteHits', () => {
 
     expect(props.sendEvent).toHaveBeenCalledTimes(1);
     expect(props.sendEvent).toHaveBeenLastCalledWith(
-      'click',
+      'click:internal',
       props.hits[0],
       'Hit Clicked'
     );
diff --git a/packages/vue-instantsearch/src/__tests__/common.test.js b/packages/vue-instantsearch/src/__tests__/common.test.js
index 5f9cf72c9f..602f8c98d2 100644
--- a/packages/vue-instantsearch/src/__tests__/common.test.js
+++ b/packages/vue-instantsearch/src/__tests__/common.test.js
@@ -8,6 +8,7 @@ import {
   createMenuTests,
   createPaginationTests,
   createInfiniteHitsTests,
+  createHitsTests,
 } from '@instantsearch/tests';
 
 import { nextTick, mountApp } from '../../test/utils';
@@ -22,7 +23,10 @@ import {
   AisInfiniteHits,
   AisSearchBox,
   createWidgetMixin,
+  AisHits,
+  AisIndex,
 } from '../instantsearch';
+import { fakeAct } from '@instantsearch/tests/common';
 jest.unmock('instantsearch.js/es');
 
 /**
@@ -122,19 +126,174 @@ createPaginationTests(async ({ instantSearchOptions, widgetParams }) => {
   await nextTick();
 });
 
-createInfiniteHitsTests(async ({ instantSearchOptions, widgetParams }) => {
-  mountApp(
-    {
-      render: renderCompat((h) =>
-        h(AisInstantSearch, { props: instantSearchOptions }, [
-          h(AisSearchBox),
-          h(AisInfiniteHits, { props: widgetParams }),
-          h(GlobalErrorSwallower),
-        ])
-      ),
-    },
-    document.body.appendChild(document.createElement('div'))
-  );
+createInfiniteHitsTests(
+  async ({ instantSearchOptions, widgetParams }) => {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisSearchBox),
+            h(AisInfiniteHits, {
+              attrs: { id: 'main-hits' },
+              props: widgetParams,
+              scopedSlots: {
+                item: ({ item: hit, sendEvent }) =>
+                  h(
+                    'div',
+                    {
+                      attrs: {
+                        'data-testid': `main-hits-top-level-${hit.__position}`,
+                      },
+                    },
+                    [
+                      hit.objectID,
+                      h('button', {
+                        attrs: {
+                          'data-testid': `main-hits-convert-${hit.__position}`,
+                        },
+                        on: {
+                          click: () =>
+                            sendEvent('conversion', hit, 'Converted'),
+                        },
+                      }),
+                      h('button', {
+                        attrs: {
+                          'data-testid': `main-hits-click-${hit.__position}`,
+                        },
+                        on: {
+                          click: () => sendEvent('click', hit, 'Clicked'),
+                        },
+                      }),
+                    ]
+                  ),
+              },
+            }),
+            h(AisIndex, { props: { indexName: 'nested' } }, [
+              h(AisInfiniteHits, {
+                attrs: { id: 'nested-hits' },
+                scopedSlots: {
+                  item: ({ item: hit, sendEvent }) =>
+                    h(
+                      'div',
+                      {
+                        attrs: {
+                          'data-testid': `nested-hits-top-level-${hit.__position}`,
+                        },
+                      },
+                      [
+                        hit.objectID,
+                        h('button', {
+                          attrs: {
+                            'data-testid': `nested-hits-click-${hit.__position}`,
+                          },
+                          on: {
+                            click: () =>
+                              sendEvent('click', hit, 'Clicked nested'),
+                          },
+                        }),
+                      ]
+                    ),
+                },
+              }),
+            ]),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
 
-  await nextTick();
-});
+    await nextTick();
+  },
+  fakeAct,
+  {
+    // Vue InstantSearch doesn't support modern insights with sendEvent + default events
+    insights: true,
+  }
+);
+
+createHitsTests(
+  async ({ instantSearchOptions, widgetParams }) => {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisSearchBox),
+            h(AisHits, {
+              attrs: { id: 'main-hits' },
+              props: widgetParams,
+              scopedSlots: {
+                item: ({ item: hit, sendEvent }) =>
+                  h(
+                    'div',
+                    {
+                      attrs: {
+                        'data-testid': `main-hits-top-level-${hit.__position}`,
+                      },
+                    },
+                    [
+                      hit.objectID,
+                      h('button', {
+                        attrs: {
+                          'data-testid': `main-hits-convert-${hit.__position}`,
+                        },
+                        on: {
+                          click: () =>
+                            sendEvent('conversion', hit, 'Converted'),
+                        },
+                      }),
+                      h('button', {
+                        attrs: {
+                          'data-testid': `main-hits-click-${hit.__position}`,
+                        },
+                        on: {
+                          click: () => sendEvent('click', hit, 'Clicked'),
+                        },
+                      }),
+                    ]
+                  ),
+              },
+            }),
+            h(AisIndex, { props: { indexName: 'nested' } }, [
+              h(AisHits, {
+                attrs: { id: 'nested-hits' },
+                scopedSlots: {
+                  item: ({ item: hit, sendEvent }) =>
+                    h(
+                      'div',
+                      {
+                        attrs: {
+                          'data-testid': `nested-hits-top-level-${hit.__position}`,
+                        },
+                      },
+                      [
+                        hit.objectID,
+                        h('button', {
+                          attrs: {
+                            'data-testid': `nested-hits-click-${hit.__position}`,
+                          },
+                          on: {
+                            click: () =>
+                              sendEvent('click', hit, 'Clicked nested'),
+                          },
+                        }),
+                      ]
+                    ),
+                },
+              }),
+            ]),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  fakeAct,
+  {
+    // Vue InstantSearch doesn't support modern insights with sendEvent + default events
+    insights: true,
+  }
+);
diff --git a/tests/common/index.ts b/tests/common/index.ts
index d31c2cc8d8..2d5cf85fcf 100644
--- a/tests/common/index.ts
+++ b/tests/common/index.ts
@@ -4,3 +4,4 @@ export * from './widgets/refinement-list';
 export * from './widgets/menu';
 export * from './widgets/pagination';
 export * from './widgets/infinite-hits';
+export * from './widgets/hits';
diff --git a/tests/common/widgets/hits/index.ts b/tests/common/widgets/hits/index.ts
new file mode 100644
index 0000000000..ec3e163ca3
--- /dev/null
+++ b/tests/common/widgets/hits/index.ts
@@ -0,0 +1,24 @@
+import type { HitsWidget } from 'instantsearch.js/es/widgets/hits/hits';
+import type { Act, TestSetup } from '../../common';
+import { fakeAct } from '../../common';
+import { createInsightsTests } from './insights';
+
+type WidgetParams = Parameters<HitsWidget>[0];
+export type HitsSetup = TestSetup<{
+  widgetParams: Omit<WidgetParams, 'container'>;
+}>;
+
+export function createHitsTests(
+  setup: HitsSetup,
+  act: Act = fakeAct,
+  // @todo: temporary, until Vue also supports insights
+  skipTests: { insights?: boolean } = {}
+) {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('Hits common tests', () => {
+    !skipTests.insights && createInsightsTests(setup, act);
+  });
+}
diff --git a/tests/common/widgets/hits/insights.ts b/tests/common/widgets/hits/insights.ts
new file mode 100644
index 0000000000..84502fe6dc
--- /dev/null
+++ b/tests/common/widgets/hits/insights.ts
@@ -0,0 +1,584 @@
+import { wait } from '@instantsearch/testutils';
+import { screen } from '@testing-library/dom';
+import type { MockSearchClient } from '@instantsearch/mocks';
+import {
+  createSearchClient,
+  createMultiSearchResponse,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import type { HitsSetup } from '.';
+import type { Act } from '../../common';
+import type { SearchClient } from 'instantsearch.js';
+import userEvent from '@testing-library/user-event';
+
+declare const window: Window &
+  typeof globalThis & {
+    aa: jest.Mock;
+  };
+
+export function createInsightsTests(setup: HitsSetup, act: Act) {
+  describe('insights', () => {
+    test('sends only one default view event per widget', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // View event called for each index once
+      {
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: hitsPerPage },
+            (_, index) => `indexName-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: hitsPerPage },
+            (_, index) => `nested-${index}`
+          ),
+        });
+        window.aa.mockClear();
+      }
+
+      // Type in the search box, but cause the same results
+      {
+        userEvent.type(screen.getByRole('searchbox'), 'a');
+
+        await act(async () => {
+          await wait(margin + delay);
+          await wait(0);
+        });
+
+        // @TODO: This is a bug, we should not send a view event when the results are the same.
+        // see: https://github.com/algolia/instantsearch.js/issues/5442
+        expect(window.aa).toHaveBeenCalledTimes(2);
+      }
+    });
+
+    test('splits view events to make sure only 20 events per call are done', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 25;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // View event called for each index, batched in chunks of 20
+      {
+        expect(window.aa).toHaveBeenCalledTimes(4);
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: 20 },
+            (_, index) => `indexName-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: 5 },
+            (_, index) => `indexName-${20 + index}`
+          ),
+        });
+
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: 20 },
+            (_, index) => `nested-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: 5 },
+            (_, index) => `nested-${20 + index}`
+          ),
+        });
+      }
+    });
+
+    test('sends only one default click event', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first item of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(1);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test('sends two default click events on double click', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first item of the first index
+      // Click on the first item of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+        // simulate real user not being able to click twice in the same frame
+        await wait(0);
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("sends default click event when there's a user-defined conversion", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first convert button of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-convert-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith(
+          'convertedObjectIDsAfterSearch',
+          {
+            eventName: 'Converted',
+            index: 'indexName',
+            objectIDs: ['indexName-0'],
+          }
+        );
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("does not send default click event when there's a user-defined click", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first click button of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-click-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(1);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("sends default click event when there's a user-defined click previously in a different widget", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-Hits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first click button of the nested index
+      // Click on the first item of the main index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('nested-hits-click-1'));
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Clicked nested',
+          index: 'nested',
+          objectIDs: ['nested-0'],
+          positions: [1],
+        });
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+  });
+}
diff --git a/tests/common/widgets/infinite-hits/index.ts b/tests/common/widgets/infinite-hits/index.ts
index ef7ec055a6..ee129bb001 100644
--- a/tests/common/widgets/infinite-hits/index.ts
+++ b/tests/common/widgets/infinite-hits/index.ts
@@ -2,6 +2,7 @@ import type { InfiniteHitsWidget } from 'instantsearch.js/es/widgets/infinite-hi
 import type { Act, TestSetup } from '../../common';
 import { fakeAct } from '../../common';
 import { createOptimisticUiTests } from './optimistic-ui';
+import { createInsightsTests } from './insights';
 
 type WidgetParams = Parameters<InfiniteHitsWidget>[0];
 export type InfiniteHitsSetup = TestSetup<{
@@ -10,7 +11,9 @@ export type InfiniteHitsSetup = TestSetup<{
 
 export function createInfiniteHitsTests(
   setup: InfiniteHitsSetup,
-  act: Act = fakeAct
+  act: Act = fakeAct,
+  // @todo: temporary, until Vue also supports insights
+  skipTests: { insights?: boolean } = {}
 ) {
   beforeEach(() => {
     document.body.innerHTML = '';
@@ -18,5 +21,6 @@ export function createInfiniteHitsTests(
 
   describe('InfiniteHits common tests', () => {
     createOptimisticUiTests(setup, act);
+    !skipTests.insights && createInsightsTests(setup, act);
   });
 }
diff --git a/tests/common/widgets/infinite-hits/insights.ts b/tests/common/widgets/infinite-hits/insights.ts
new file mode 100644
index 0000000000..e8b72c866c
--- /dev/null
+++ b/tests/common/widgets/infinite-hits/insights.ts
@@ -0,0 +1,584 @@
+import { wait } from '@instantsearch/testutils';
+import { screen } from '@testing-library/dom';
+import type { MockSearchClient } from '@instantsearch/mocks';
+import {
+  createSearchClient,
+  createMultiSearchResponse,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import type { InfiniteHitsSetup } from '.';
+import type { Act } from '../../common';
+import type { SearchClient } from 'instantsearch.js';
+import userEvent from '@testing-library/user-event';
+
+declare const window: Window &
+  typeof globalThis & {
+    aa: jest.Mock;
+  };
+
+export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
+  describe('insights', () => {
+    test('sends only one default view event per widget', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // View event called for each index once
+      {
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: hitsPerPage },
+            (_, index) => `indexName-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: hitsPerPage },
+            (_, index) => `nested-${index}`
+          ),
+        });
+        window.aa.mockClear();
+      }
+
+      // Type in the search box, but cause the same results
+      {
+        userEvent.type(screen.getByRole('searchbox'), 'a');
+
+        await act(async () => {
+          await wait(margin + delay);
+          await wait(0);
+        });
+
+        // @TODO: This is a bug, we should not send a view event when the results are the same.
+        // see: https://github.com/algolia/instantsearch.js/issues/5442
+        expect(window.aa).toHaveBeenCalledTimes(2);
+      }
+    });
+
+    test('splits view events to make sure only 20 events per call are done', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 25;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // View event called for each index, batched in chunks of 20
+      {
+        expect(window.aa).toHaveBeenCalledTimes(4);
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: 20 },
+            (_, index) => `indexName-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'indexName',
+          objectIDs: Array.from(
+            { length: 5 },
+            (_, index) => `indexName-${20 + index}`
+          ),
+        });
+
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: 20 },
+            (_, index) => `nested-${index}`
+          ),
+        });
+        expect(window.aa).toHaveBeenCalledWith('viewedObjectIDs', {
+          eventName: 'Hits Viewed',
+          index: 'nested',
+          objectIDs: Array.from(
+            { length: 5 },
+            (_, index) => `nested-${20 + index}`
+          ),
+        });
+      }
+    });
+
+    test('sends only one default click event', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first item of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(1);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test('sends two default click events on double click', async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first item of the first index
+      // Click on the first item of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+        // simulate real user not being able to click twice in the same frame
+        await wait(0);
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("sends default click event when there's a user-defined conversion", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first convert button of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-convert-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith(
+          'convertedObjectIDsAfterSearch',
+          {
+            eventName: 'Converted',
+            index: 'indexName',
+            objectIDs: ['indexName-0'],
+          }
+        );
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("does not send default click event when there's a user-defined click", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first click button of the first index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('main-hits-click-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(1);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+
+    test("sends default click event when there's a user-defined click previously in a different widget", async () => {
+      const delay = 100;
+      const margin = 10;
+      const hitsPerPage = 2;
+      window.aa = jest.fn();
+      const options = {
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient: createSearchClient({
+            search: jest.fn(async (requests) => {
+              await wait(delay);
+              return createMultiSearchResponse(
+                ...requests.map(
+                  ({
+                    indexName,
+                    params: { page = 0, query } = {},
+                  }: Parameters<SearchClient['search']>[0][number]) =>
+                    createSingleSearchResponse({
+                      hits: Array.from({ length: hitsPerPage }).map(
+                        (_, index) => ({
+                          objectID: `${indexName}-${
+                            page * hitsPerPage + index
+                          }`,
+                        })
+                      ),
+                      query,
+                      page,
+                      nbPages: 20,
+                    })
+                )
+              );
+            }) as MockSearchClient['search'],
+          }),
+        },
+        widgetParams: {},
+      };
+
+      await setup(options);
+      window.aa.mockClear();
+
+      // Wait for initial results to populate widgets with data
+      await act(async () => {
+        await wait(margin + delay);
+        await wait(0);
+      });
+
+      // Initial state, before interaction
+      {
+        expect(
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+        expect(
+          document.querySelectorAll('#nested-hits .ais-InfiniteHits-item')
+        ).toHaveLength(hitsPerPage);
+      }
+
+      // Click on the first click button of the nested index
+      // Click on the first item of the main index
+      {
+        window.aa.mockClear();
+        userEvent.click(screen.getByTestId('nested-hits-click-1'));
+        userEvent.click(screen.getByTestId('main-hits-top-level-1'));
+
+        expect(window.aa).toHaveBeenCalledTimes(2);
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Clicked nested',
+          index: 'nested',
+          objectIDs: ['nested-0'],
+          positions: [1],
+        });
+        expect(window.aa).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+          eventName: 'Hit Clicked',
+          index: 'indexName',
+          objectIDs: ['indexName-0'],
+          positions: [1],
+        });
+      }
+    });
+  });
+}
diff --git a/tests/common/widgets/infinite-hits/optimistic-ui.ts b/tests/common/widgets/infinite-hits/optimistic-ui.ts
index f5cc247a8e..12a75df35c 100644
--- a/tests/common/widgets/infinite-hits/optimistic-ui.ts
+++ b/tests/common/widgets/infinite-hits/optimistic-ui.ts
@@ -55,15 +55,15 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
       // Initial state, before interaction
       {
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
       // Load the next page
       {
-        const nextPage = screen.getByRole('button', {
+        const nextPage = screen.getAllByRole('button', {
           name: 'Show more results',
-        });
+        })[0];
         await act(async () => {
           nextPage.click();
           await wait(0);
@@ -72,7 +72,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
         // UI has not changed yet
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -83,7 +83,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
         });
 
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(2 * hitsPerPage);
       }
     });
@@ -130,7 +130,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
       // Initial state, before interaction
       {
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -146,7 +146,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
         // UI has not changed yet
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -157,7 +157,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
         });
 
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
     });
@@ -208,7 +208,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
       // Initial state, before interaction
       {
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -216,9 +216,9 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
       // Load the next page
       {
-        const nextPage = screen.getByRole('button', {
+        const nextPage = screen.getAllByRole('button', {
           name: 'Show more results',
-        });
+        })[0];
         await act(async () => {
           nextPage.click();
           await wait(0);
@@ -227,7 +227,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
         // UI has not changed yet
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -238,7 +238,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
         });
 
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -246,9 +246,9 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
       // Load the next page
       {
-        const nextPage = screen.getByRole('button', {
+        const nextPage = screen.getAllByRole('button', {
           name: 'Show more results',
-        });
+        })[0];
         await act(async () => {
           nextPage.click();
           await wait(0);
@@ -257,7 +257,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
 
         // UI has not changed yet
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(hitsPerPage);
       }
 
@@ -268,7 +268,7 @@ export function createOptimisticUiTests(setup: InfiniteHitsSetup, act: Act) {
         });
 
         expect(
-          document.querySelectorAll('.ais-InfiniteHits-item')
+          document.querySelectorAll('#main-hits .ais-InfiniteHits-item')
         ).toHaveLength(2 * hitsPerPage);
       }
     });