From 2679a5e6a5e5767fc3b1c1e074c53ab6a084e7f3 Mon Sep 17 00:00:00 2001
From: Maria Lungu <heymarialungu@gmail.com>
Date: Wed, 15 Jan 2025 18:48:47 +0100
Subject: [PATCH] feat(recommend): add support for event collection in
 recommend (#6523)

---------

Co-authored-by: Raed <raed.chammam@algolia.com>
---
 .../src/components/Carousel.tsx               |  9 ++++
 .../components/__tests__/Carousel.test.tsx    |  5 +++
 .../src/components/recommend-shared/List.tsx  |  8 +++-
 .../src/types/Recommend.ts                    |  3 +-
 .../connectFrequentlyBoughtTogether.ts        | 41 +++++++++++++++--
 .../looking-similar/connectLookingSimilar.ts  | 44 +++++++++++++++---
 .../connectRelatedProducts.ts                 | 45 ++++++++++++++++---
 .../trending-items/connectTrendingItems.ts    | 45 ++++++++++++++++---
 .../src/templates/__tests__/carousel.test.tsx |  4 ++
 .../src/templates/carousel/carousel.tsx       |  4 ++
 .../frequently-bought-together.test.tsx       |  6 ++-
 .../frequently-bought-together.tsx            | 11 +++--
 .../__tests__/looking-similar.test.tsx        |  6 ++-
 .../looking-similar/looking-similar.tsx       | 12 ++++-
 .../__tests__/related-products.test.tsx       |  6 ++-
 .../related-products/related-products.tsx     | 11 +++--
 .../__tests__/trending-items.test.tsx         |  6 ++-
 .../widgets/trending-items/trending-items.tsx | 11 +++--
 .../__tests__/useRelatedProducts.test.tsx     | 11 ++++-
 .../__tests__/useTrendingItems.test.tsx       | 11 ++++-
 .../components/__tests__/Carousel.test.tsx    |  4 ++
 .../src/widgets/FrequentlyBoughtTogether.tsx  |  8 ++--
 .../src/widgets/LookingSimilar.tsx            |  8 ++--
 .../src/widgets/RelatedProducts.tsx           |  8 ++--
 .../src/widgets/TrendingItems.tsx             |  8 ++--
 .../FrequentlyBoughtTogether.test.tsx         |  6 ++-
 .../widgets/__tests__/LookingSimilar.test.tsx |  6 ++-
 .../__tests__/RelatedProducts.test.tsx        |  6 ++-
 .../widgets/__tests__/TrendingItems.test.tsx  |  6 ++-
 .../frequently-bought-together/options.ts     | 12 +++--
 .../common/widgets/looking-similar/options.ts | 12 +++--
 .../widgets/related-products/options.ts       | 12 +++--
 .../common/widgets/trending-items/options.ts  | 12 +++--
 33 files changed, 322 insertions(+), 85 deletions(-)

diff --git a/packages/instantsearch-ui-components/src/components/Carousel.tsx b/packages/instantsearch-ui-components/src/components/Carousel.tsx
index 452cec3e80..ed6b18fb51 100644
--- a/packages/instantsearch-ui-components/src/components/Carousel.tsx
+++ b/packages/instantsearch-ui-components/src/components/Carousel.tsx
@@ -9,6 +9,7 @@ import type {
   RecommendItemComponentProps,
   RecordWithObjectID,
   Renderer,
+  SendEventForHits,
 } from '../types';
 
 export type CarouselProps<
@@ -28,6 +29,7 @@ export type CarouselProps<
   nextIconComponent?: () => JSX.Element;
   classNames?: Partial<CarouselClassNames>;
   translations?: Partial<CarouselTranslations>;
+  sendEvent: SendEventForHits;
 };
 
 export type CarouselClassNames = {
@@ -135,6 +137,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
       nextIconComponent: NextIconComponent = NextIconDefaultComponent,
       items,
       translations: userTranslations,
+      sendEvent,
       ...props
     } = userProps;
 
@@ -235,6 +238,12 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
               className={cx(cssClasses.item)}
               aria-roledescription="slide"
               aria-label={`${index + 1} of ${items.length}`}
+              onClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
+              onAuxClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
             >
               <ItemComponent item={item} />
             </li>
diff --git a/packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx
index 9f906e705d..802dbca496 100644
--- a/packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx
+++ b/packages/instantsearch-ui-components/src/components/__tests__/Carousel.test.tsx
@@ -43,6 +43,7 @@ describe('Carousel', () => {
   test('renders items', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[
           {
             objectID: '1',
@@ -138,6 +139,7 @@ describe('Carousel', () => {
   test('renders custom "Previous" and "Next" components', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[
           {
             objectID: '1',
@@ -215,6 +217,7 @@ describe('Carousel', () => {
   test('accepts custom translations', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         translations={{
@@ -248,6 +251,7 @@ describe('Carousel', () => {
   test('forwards `div` props to the root element', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         hidden={true}
@@ -262,6 +266,7 @@ describe('Carousel', () => {
   test('accepts custom class names', () => {
     const { container } = render(
       <CarouselWithRefs
+        sendEvent={jest.fn()}
         items={[{ objectID: '1', __position: 1 }]}
         itemComponent={ItemComponent}
         classNames={{
diff --git a/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx b/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
index 7b2f228337..192c187c87 100644
--- a/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
+++ b/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
@@ -25,8 +25,12 @@ export function createListComponent({ createElement }: Renderer) {
             <li
               key={item.objectID}
               className={classNames.item}
-              onClick={sendEvent}
-              onAuxClick={sendEvent}
+              onClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
+              onAuxClick={() => {
+                sendEvent('click:internal', item, 'Item Clicked');
+              }}
             >
               <ItemComponent item={item} />
             </li>
diff --git a/packages/instantsearch-ui-components/src/types/Recommend.ts b/packages/instantsearch-ui-components/src/types/Recommend.ts
index 164ead8cae..28a0e07c32 100644
--- a/packages/instantsearch-ui-components/src/types/Recommend.ts
+++ b/packages/instantsearch-ui-components/src/types/Recommend.ts
@@ -87,7 +87,8 @@ export type RecommendInnerComponentProps<TObject> = {
 
 export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
   objectID: string;
-  // @TODO: once events are implemented, this type needs `__position` and `__queryID`
+  __position: number;
+  __queryID?: string;
 };
 
 export type RecommendItemComponentProps<TObject> = {
diff --git a/packages/instantsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts b/packages/instantsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts
index 14866a9c40..e8d53aa45f 100644
--- a/packages/instantsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts
+++ b/packages/instantsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts
@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,11 @@ export type FrequentlyBoughtTogetherRenderState<
    * The matched recommendations from Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type FrequentlyBoughtTogetherConnectorParams<
@@ -118,6 +127,8 @@ export default (function connectFrequentlyBoughtTogether<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.frequentlyBoughtTogether',
@@ -148,23 +159,45 @@ export default (function connectFrequentlyBoughtTogether<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
         const transformedItems = transformItems(
-          results.hits as Array<AlgoliaHit<THit>>,
+          itemsWithAbsolutePositionAndQueryID,
           {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
           }
         );
 
-        return { items: transformedItems, widgetParams };
+        return {
+          items: transformedItems,
+          widgetParams,
+          sendEvent,
+        };
       },
 
       dispose({ recommendState }) {
diff --git a/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts b/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts
index a487d5b8e8..39ab72c763 100644
--- a/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts
+++ b/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts
@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,10 @@ export type LookingSimilarRenderState<
    * The matched recommendations from the Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type LookingSimilarConnectorParams<
@@ -121,6 +129,8 @@ export default (function connectLookingSimilar<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.lookingSimilar',
@@ -151,20 +161,44 @@ export default (function connectLookingSimilar<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
-        return {
-          items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID,
+          {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
-          }),
+          }
+        );
+
+        return {
+          items: transformedItems,
           widgetParams,
+          sendEvent,
         };
       },
 
diff --git a/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts b/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts
index 9e23a7401f..526721aacc 100644
--- a/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts
+++ b/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts
@@ -4,8 +4,12 @@ import {
   noop,
   escapeHits,
   TAG_PLACEHOLDER,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -30,6 +34,11 @@ export type RelatedProductsRenderState<
    * The matched recommendations from the Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type RelatedProductsConnectorParams<
@@ -121,6 +130,8 @@ export default (function connectRelatedProducts<
       throw new Error(withUsage('The `objectIDs` option is required.'));
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.relatedProducts',
@@ -151,20 +162,44 @@ export default (function connectRelatedProducts<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
-        return {
-          items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID,
+          {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
-          }),
+          }
+        );
+
+        return {
+          items: transformedItems,
           widgetParams,
+          sendEvent,
         };
       },
 
diff --git a/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts b/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts
index d6025a7abc..5454a6b0bc 100644
--- a/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts
+++ b/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts
@@ -5,8 +5,12 @@ import {
   escapeHits,
   TAG_PLACEHOLDER,
   getObjectType,
+  createSendEventForHits,
+  addAbsolutePosition,
+  addQueryID,
 } from '../../lib/utils';
 
+import type { SendEventForHits } from '../../lib/utils';
 import type {
   Connector,
   TransformItems,
@@ -31,6 +35,11 @@ export type TrendingItemsRenderState<
    * The matched recommendations from the Algolia API.
    */
   items: Array<AlgoliaHit<THit>>;
+
+  /**
+   * Sends an event to the Insights middleware.
+   */
+  sendEvent: SendEventForHits;
 };
 
 export type TrendingItemsConnectorParams<
@@ -141,6 +150,8 @@ export default (function connectTrendingItems<
       );
     }
 
+    let sendEvent: SendEventForHits;
+
     return {
       dependsOn: 'recommend',
       $$type: 'ais.trendingItems',
@@ -171,20 +182,44 @@ export default (function connectTrendingItems<
         return renderState;
       },
 
-      getWidgetRenderState({ results }) {
+      getWidgetRenderState({ results, helper, instantSearchInstance }) {
+        if (!sendEvent) {
+          sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            getIndex: () => helper.getIndex(),
+            widgetType: this.$$type,
+          });
+        }
         if (results === null || results === undefined) {
-          return { items: [], widgetParams };
+          return { items: [], widgetParams, sendEvent };
         }
 
         if (escapeHTML && results.hits.length > 0) {
           results.hits = escapeHits(results.hits);
         }
 
-        return {
-          items: transformItems(results.hits as Array<AlgoliaHit<THit>>, {
+        const itemsWithAbsolutePosition = addAbsolutePosition(
+          results.hits,
+          0,
+          1
+        );
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID,
+          {
             results: results as RecommendResponse<AlgoliaHit<THit>>,
-          }),
+          }
+        );
+
+        return {
+          items: transformedItems,
           widgetParams,
+          sendEvent,
         };
       },
 
diff --git a/packages/instantsearch.js/src/templates/__tests__/carousel.test.tsx b/packages/instantsearch.js/src/templates/__tests__/carousel.test.tsx
index a99129e8cd..d936732cd1 100644
--- a/packages/instantsearch.js/src/templates/__tests__/carousel.test.tsx
+++ b/packages/instantsearch.js/src/templates/__tests__/carousel.test.tsx
@@ -14,6 +14,7 @@ describe('carousel', () => {
 
     const { container } = render(
       template({
+        sendEvent: jest.fn(),
         items: [
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -118,6 +119,7 @@ describe('carousel', () => {
 
     const { container } = render(
       template({
+        sendEvent: jest.fn(),
         items: [
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -155,6 +157,7 @@ describe('carousel', () => {
 
     const { container } = render(
       template({
+        sendEvent: jest.fn(),
         items: [
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -239,6 +242,7 @@ describe('carousel', () => {
 
     const { container } = render(
       template({
+        sendEvent: jest.fn(),
         items: [
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
diff --git a/packages/instantsearch.js/src/templates/carousel/carousel.tsx b/packages/instantsearch.js/src/templates/carousel/carousel.tsx
index 24ba0fb486..6532592bf9 100644
--- a/packages/instantsearch.js/src/templates/carousel/carousel.tsx
+++ b/packages/instantsearch.js/src/templates/carousel/carousel.tsx
@@ -56,6 +56,8 @@ type CarouselTemplateProps<TObject extends Record<string, unknown>> = Pick<
     item?: CarouselUiProps<TObject>['itemComponent'];
   };
   cssClasses?: Partial<CarouselUiProps<TObject>['classNames']>;
+} & {
+  sendEvent?: CarouselUiProps<TObject>['sendEvent'];
 };
 
 export function carousel<TObject extends Record<string, unknown>>({
@@ -66,12 +68,14 @@ export function carousel<TObject extends Record<string, unknown>>({
     items,
     templates: widgetTemplates,
     cssClasses: widgetCssClasses = {},
+    sendEvent = () => {},
   }: CarouselTemplateProps<TObject>) {
     const { previous, next } = templates;
 
     return (
       <CarouselWithRefs
         items={items}
+        sendEvent={sendEvent}
         itemComponent={widgetTemplates.item}
         previousIconComponent={
           (previous
diff --git a/packages/instantsearch.js/src/widgets/frequently-bought-together/__tests__/frequently-bought-together.test.tsx b/packages/instantsearch.js/src/widgets/frequently-bought-together/__tests__/frequently-bought-together.test.tsx
index 1715478e67..e742ec303c 100644
--- a/packages/instantsearch.js/src/widgets/frequently-bought-together/__tests__/frequently-bought-together.test.tsx
+++ b/packages/instantsearch.js/src/widgets/frequently-bought-together/__tests__/frequently-bought-together.test.tsx
@@ -137,14 +137,16 @@ describe('frequentlyBoughtTogether', () => {
                   class="ais-FrequentlyBoughtTogether-item"
                 >
                   {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
                 </li>
                 <li
                   class="ais-FrequentlyBoughtTogether-item"
                 >
                   {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
                 </li>
               </ol>
diff --git a/packages/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx b/packages/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx
index f4359e4214..52284c9ddf 100644
--- a/packages/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx
+++ b/packages/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx
@@ -24,6 +24,7 @@ import type {
   Renderer,
   BaseHit,
   RecommendResponse,
+  Hit,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -58,7 +59,7 @@ const renderer =
     FrequentlyBoughtTogetherRenderState,
     Partial<FrequentlyBoughtTogetherWidgetParams>
   > =>
-  ({ items, results, instantSearchInstance }, isFirstRendering) => {
+  ({ items, results, instantSearchInstance, sendEvent }, isFirstRendering) => {
     if (isFirstRendering) {
       renderState.templateProps = prepareTemplateProps({
         defaultTemplates: {} as unknown as Required<
@@ -92,6 +93,7 @@ const renderer =
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
+                sendEvent={sendEvent}
               />
             );
           }
@@ -119,6 +121,7 @@ const renderer =
               templateKey="layout"
               rootTagName="fragment"
               data={{
+                sendEvent,
                 items: data.items,
                 templates: {
                   item: templates.item
@@ -128,6 +131,7 @@ const renderer =
                           templateKey="item"
                           rootTagName="fragment"
                           data={item}
+                          sendEvent={sendEvent}
                         />
                       )
                     : undefined,
@@ -137,6 +141,7 @@ const renderer =
                   item: data.classNames.item,
                 },
               }}
+              sendEvent={sendEvent}
             />
           )
         : undefined
@@ -144,10 +149,10 @@ const renderer =
 
     render(
       <FrequentlyBoughtTogether
-        items={items as Array<AlgoliaHit<THit>>}
+        items={items as Array<Hit<THit>>}
         headerComponent={headerComponent}
         itemComponent={itemComponent}
-        sendEvent={() => {}}
+        sendEvent={sendEvent}
         classNames={cssClasses}
         emptyComponent={emptyComponent}
         layout={layoutComponent}
diff --git a/packages/instantsearch.js/src/widgets/looking-similar/__tests__/looking-similar.test.tsx b/packages/instantsearch.js/src/widgets/looking-similar/__tests__/looking-similar.test.tsx
index 25bda16f81..9c7261f73b 100644
--- a/packages/instantsearch.js/src/widgets/looking-similar/__tests__/looking-similar.test.tsx
+++ b/packages/instantsearch.js/src/widgets/looking-similar/__tests__/looking-similar.test.tsx
@@ -138,14 +138,16 @@ describe('lookingSimilar', () => {
                   class="ais-LookingSimilar-item"
                 >
                   {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
                 </li>
                 <li
                   class="ais-LookingSimilar-item"
                 >
                   {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
                 </li>
               </ol>
diff --git a/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx b/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx
index d7ac33878d..043c6078c6 100644
--- a/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx
+++ b/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx
@@ -24,6 +24,7 @@ import type {
   Renderer,
   BaseHit,
   RecommendResponse,
+  Hit,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -54,7 +55,10 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
   };
   templates: LookingSimilarTemplates<THit>;
 }): Renderer<LookingSimilarRenderState, Partial<LookingSimilarWidgetParams>> {
-  return ({ items, results, instantSearchInstance }, isFirstRendering) => {
+  return (
+    { items, results, instantSearchInstance, sendEvent },
+    isFirstRendering
+  ) => {
     if (isFirstRendering) {
       renderState.templateProps = prepareTemplateProps({
         defaultTemplates: {} as unknown as Required<
@@ -88,6 +92,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
+                sendEvent={sendEvent}
               />
             );
           }
@@ -115,6 +120,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
               templateKey="layout"
               rootTagName="fragment"
               data={{
+                sendEvent,
                 items: data.items,
                 templates: {
                   item: templates.item
@@ -124,6 +130,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                           templateKey="item"
                           rootTagName="fragment"
                           data={item}
+                          sendEvent={sendEvent}
                         />
                       )
                     : undefined,
@@ -133,6 +140,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                   item: data.classNames.item,
                 },
               }}
+              sendEvent={sendEvent}
             />
           )
         : undefined
@@ -140,7 +148,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
 
     render(
       <LookingSimilar
-        items={items as Array<AlgoliaHit<THit>>}
+        items={items as Array<Hit<THit>>}
         headerComponent={headerComponent}
         itemComponent={itemComponent}
         sendEvent={() => {}}
diff --git a/packages/instantsearch.js/src/widgets/related-products/__tests__/related-products.test.tsx b/packages/instantsearch.js/src/widgets/related-products/__tests__/related-products.test.tsx
index a429c3427d..cdc26a15da 100644
--- a/packages/instantsearch.js/src/widgets/related-products/__tests__/related-products.test.tsx
+++ b/packages/instantsearch.js/src/widgets/related-products/__tests__/related-products.test.tsx
@@ -139,14 +139,16 @@ describe('relatedProducts', () => {
                   class="ais-RelatedProducts-item"
                 >
                   {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
                 </li>
                 <li
                   class="ais-RelatedProducts-item"
                 >
                   {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
                 </li>
               </ol>
diff --git a/packages/instantsearch.js/src/widgets/related-products/related-products.tsx b/packages/instantsearch.js/src/widgets/related-products/related-products.tsx
index 7f14f24a8e..e842e627b6 100644
--- a/packages/instantsearch.js/src/widgets/related-products/related-products.tsx
+++ b/packages/instantsearch.js/src/widgets/related-products/related-products.tsx
@@ -24,6 +24,7 @@ import type {
   Renderer,
   BaseHit,
   RecommendResponse,
+  Hit,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -58,7 +59,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
   Partial<RelatedProductsWidgetParams>
 > {
   return function renderer(
-    { items, results, instantSearchInstance },
+    { items, results, instantSearchInstance, sendEvent },
     isFirstRendering
   ) {
     if (isFirstRendering) {
@@ -98,6 +99,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
+                sendEvent={sendEvent}
               />
             );
           }
@@ -125,6 +127,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
               templateKey="layout"
               rootTagName="fragment"
               data={{
+                sendEvent,
                 items: data.items,
                 templates: {
                   item: templates.item
@@ -134,6 +137,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                           templateKey="item"
                           rootTagName="fragment"
                           data={item}
+                          sendEvent={sendEvent}
                         />
                       )
                     : undefined,
@@ -143,6 +147,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                   item: data.classNames.item,
                 },
               }}
+              sendEvent={sendEvent}
             />
           )
         : undefined
@@ -150,8 +155,8 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
 
     render(
       <RelatedProducts
-        items={items as Array<AlgoliaHit<THit>>}
-        sendEvent={() => {}}
+        items={items as Array<Hit<THit>>}
+        sendEvent={sendEvent}
         classNames={cssClasses}
         headerComponent={headerComponent}
         itemComponent={itemComponent}
diff --git a/packages/instantsearch.js/src/widgets/trending-items/__tests__/trending-items.test.tsx b/packages/instantsearch.js/src/widgets/trending-items/__tests__/trending-items.test.tsx
index b0d27b97fe..1a373824e7 100644
--- a/packages/instantsearch.js/src/widgets/trending-items/__tests__/trending-items.test.tsx
+++ b/packages/instantsearch.js/src/widgets/trending-items/__tests__/trending-items.test.tsx
@@ -135,14 +135,16 @@ describe('trendingItems', () => {
                   class="ais-TrendingItems-item"
                 >
                   {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
                 </li>
                 <li
                   class="ais-TrendingItems-item"
                 >
                   {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
                 </li>
               </ol>
diff --git a/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx b/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx
index 706a5f90e7..dd81377ce6 100644
--- a/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx
+++ b/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx
@@ -24,6 +24,7 @@ import type {
   Renderer,
   BaseHit,
   RecommendResponse,
+  Hit,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -58,7 +59,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
   Partial<TrendingItemsWidgetParams>
 > {
   return function renderer(
-    { items, results, instantSearchInstance },
+    { items, results, instantSearchInstance, sendEvent },
     isFirstRendering
   ) {
     if (isFirstRendering) {
@@ -98,6 +99,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
+                sendEvent={sendEvent}
               />
             );
           }
@@ -125,6 +127,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
               templateKey="layout"
               rootTagName="fragment"
               data={{
+                sendEvent,
                 items: data.items,
                 templates: {
                   item: templates.item
@@ -134,6 +137,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                           templateKey="item"
                           rootTagName="fragment"
                           data={item}
+                          sendEvent={sendEvent}
                         />
                       )
                     : undefined,
@@ -143,6 +147,7 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
                   item: data.classNames.item,
                 },
               }}
+              sendEvent={sendEvent}
             />
           )
         : undefined
@@ -150,8 +155,8 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
 
     render(
       <TrendingItems
-        items={items as Array<AlgoliaHit<THit>>}
-        sendEvent={() => {}}
+        items={items as Array<Hit<THit>>}
+        sendEvent={sendEvent}
         classNames={cssClasses}
         headerComponent={headerComponent}
         itemComponent={itemComponent}
diff --git a/packages/react-instantsearch-core/src/connectors/__tests__/useRelatedProducts.test.tsx b/packages/react-instantsearch-core/src/connectors/__tests__/useRelatedProducts.test.tsx
index 55868e7ae4..b5f558240c 100644
--- a/packages/react-instantsearch-core/src/connectors/__tests__/useRelatedProducts.test.tsx
+++ b/packages/react-instantsearch-core/src/connectors/__tests__/useRelatedProducts.test.tsx
@@ -21,12 +21,19 @@ describe('useRelatedProducts', () => {
     );
 
     // Initial render state from manual `getWidgetRenderState`
-    expect(result.current).toEqual({ items: [] });
+    expect(result.current).toEqual({
+      items: [],
+      sendEvent: expect.any(Function),
+    });
 
     await waitFor(() => {
       // InstantSearch.js state from the `render` lifecycle step
       expect(result.current).toEqual({
-        items: expect.arrayContaining([{ objectID: '1' }, { objectID: '2' }]),
+        sendEvent: expect.any(Function),
+        items: expect.arrayContaining([
+          { __position: 1, objectID: '1' },
+          { __position: 2, objectID: '2' },
+        ]),
       });
     });
   });
diff --git a/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingItems.test.tsx b/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingItems.test.tsx
index 35972165c0..703db93ebc 100644
--- a/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingItems.test.tsx
+++ b/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingItems.test.tsx
@@ -18,11 +18,18 @@ describe('useTrendingItems', () => {
     });
 
     // Initial render state from manual `getWidgetRenderState`
-    expect(result.current).toEqual({ items: [] });
+    expect(result.current).toEqual({
+      items: [],
+      sendEvent: expect.any(Function),
+    });
 
     await waitFor(() => {
       expect(result.current).toEqual({
-        items: expect.arrayContaining([{ objectID: '1' }, { objectID: '2' }]),
+        sendEvent: expect.any(Function),
+        items: expect.arrayContaining([
+          { __position: 1, objectID: '1' },
+          { __position: 2, objectID: '2' },
+        ]),
       });
     });
   });
diff --git a/packages/react-instantsearch/src/components/__tests__/Carousel.test.tsx b/packages/react-instantsearch/src/components/__tests__/Carousel.test.tsx
index a20b7129d4..70817e4da8 100644
--- a/packages/react-instantsearch/src/components/__tests__/Carousel.test.tsx
+++ b/packages/react-instantsearch/src/components/__tests__/Carousel.test.tsx
@@ -11,6 +11,7 @@ describe('Carousel', () => {
   test('renders with default props', () => {
     const { container } = render(
       <Carousel
+        sendEvent={jest.fn()}
         items={[
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -100,6 +101,7 @@ describe('Carousel', () => {
   test('adds custom class names', () => {
     const { container } = render(
       <Carousel
+        sendEvent={jest.fn()}
         items={[
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -133,6 +135,7 @@ describe('Carousel', () => {
   test('adds custom icon components', () => {
     const { container } = render(
       <Carousel
+        sendEvent={jest.fn()}
         items={[
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
@@ -204,6 +207,7 @@ describe('Carousel', () => {
   test('adds custom translations', () => {
     const { container } = render(
       <Carousel
+        sendEvent={jest.fn()}
         items={[
           { objectID: '1', __position: 1 },
           { objectID: '2', __position: 2 },
diff --git a/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx b/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx
index 1253726851..fc8b789b29 100644
--- a/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx
+++ b/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx
@@ -9,7 +9,7 @@ import type {
   FrequentlyBoughtTogetherProps as FrequentlyBoughtTogetherPropsUiComponentProps,
   Pragma,
 } from 'instantsearch-ui-components';
-import type { AlgoliaHit, BaseHit } from 'instantsearch.js';
+import type { AlgoliaHit, BaseHit, Hit } from 'instantsearch.js';
 import type { UseFrequentlyBoughtTogetherProps } from 'react-instantsearch-core';
 
 type UiProps<THit extends BaseHit> = Pick<
@@ -54,7 +54,7 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
   ...props
 }: FrequentlyBoughtTogetherProps<THit>) {
   const { status } = useInstantSearch();
-  const { items } = useFrequentlyBoughtTogether<THit>(
+  const { items, sendEvent } = useFrequentlyBoughtTogether<THit>(
     {
       objectIDs,
       limit,
@@ -78,13 +78,13 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
     : undefined;
 
   const uiProps: UiProps<THit> = {
-    items,
+    items: items as Array<Hit<THit>>,
     itemComponent,
     headerComponent,
     emptyComponent,
     layout,
     status,
-    sendEvent: () => {},
+    sendEvent,
   };
 
   return <FrequentlyBoughtTogetherUiComponent {...props} {...uiProps} />;
diff --git a/packages/react-instantsearch/src/widgets/LookingSimilar.tsx b/packages/react-instantsearch/src/widgets/LookingSimilar.tsx
index 245aea92c0..66fea2a003 100644
--- a/packages/react-instantsearch/src/widgets/LookingSimilar.tsx
+++ b/packages/react-instantsearch/src/widgets/LookingSimilar.tsx
@@ -6,7 +6,7 @@ import type {
   LookingSimilarProps as LookingSimilarPropsUiComponentProps,
   Pragma,
 } from 'instantsearch-ui-components';
-import type { AlgoliaHit, BaseHit } from 'instantsearch.js';
+import type { AlgoliaHit, BaseHit, Hit } from 'instantsearch.js';
 import type { UseLookingSimilarProps } from 'react-instantsearch-core';
 
 type UiProps<THit extends BaseHit> = Pick<
@@ -51,7 +51,7 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
   ...props
 }: LookingSimilarProps<THit>) {
   const { status } = useInstantSearch();
-  const { items } = useLookingSimilar<THit>(
+  const { items, sendEvent } = useLookingSimilar<THit>(
     {
       objectIDs,
       limit,
@@ -76,13 +76,13 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
     : undefined;
 
   const uiProps: UiProps<THit> = {
-    items,
+    items: items as Array<Hit<THit>>,
     itemComponent,
     headerComponent,
     emptyComponent,
     layout,
     status,
-    sendEvent: () => {},
+    sendEvent,
   };
 
   return <LookingSimilarUiComponent {...props} {...uiProps} />;
diff --git a/packages/react-instantsearch/src/widgets/RelatedProducts.tsx b/packages/react-instantsearch/src/widgets/RelatedProducts.tsx
index 788042bc95..83bed02a42 100644
--- a/packages/react-instantsearch/src/widgets/RelatedProducts.tsx
+++ b/packages/react-instantsearch/src/widgets/RelatedProducts.tsx
@@ -6,7 +6,7 @@ import type {
   RelatedProductsProps as RelatedProductsUiComponentProps,
   Pragma,
 } from 'instantsearch-ui-components';
-import type { AlgoliaHit, BaseHit } from 'instantsearch.js';
+import type { BaseHit, Hit } from 'instantsearch.js';
 import type { UseRelatedProductsProps } from 'react-instantsearch-core';
 
 type UiProps<TItem extends BaseHit> = Pick<
@@ -51,7 +51,7 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
   ...props
 }: RelatedProductsProps<TItem>) {
   const { status } = useInstantSearch();
-  const { items } = useRelatedProducts(
+  const { items, sendEvent } = useRelatedProducts(
     {
       objectIDs,
       limit,
@@ -76,13 +76,13 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
     : undefined;
 
   const uiProps: UiProps<TItem> = {
-    items: items as Array<AlgoliaHit<TItem>>,
+    items: items as Array<Hit<TItem>>,
     itemComponent,
     headerComponent,
     emptyComponent,
     layout,
     status,
-    sendEvent: () => {},
+    sendEvent,
   };
 
   return <RelatedProductsUiComponent {...props} {...uiProps} />;
diff --git a/packages/react-instantsearch/src/widgets/TrendingItems.tsx b/packages/react-instantsearch/src/widgets/TrendingItems.tsx
index a4d22b5f37..4d8c8b0721 100644
--- a/packages/react-instantsearch/src/widgets/TrendingItems.tsx
+++ b/packages/react-instantsearch/src/widgets/TrendingItems.tsx
@@ -6,7 +6,7 @@ import type {
   TrendingItemsProps as TrendingItemsUiComponentProps,
   Pragma,
 } from 'instantsearch-ui-components';
-import type { AlgoliaHit, BaseHit } from 'instantsearch.js';
+import type { BaseHit, Hit } from 'instantsearch.js';
 import type { UseTrendingItemsProps } from 'react-instantsearch-core';
 
 type UiProps<TItem extends BaseHit> = Pick<
@@ -55,7 +55,7 @@ export function TrendingItems<TItem extends BaseHit = BaseHit>({
     facetName && facetValue ? { facetName, facetValue } : {};
 
   const { status } = useInstantSearch();
-  const { items } = useTrendingItems(
+  const { items, sendEvent } = useTrendingItems(
     {
       ...facetParameters,
       limit,
@@ -80,13 +80,13 @@ export function TrendingItems<TItem extends BaseHit = BaseHit>({
     : undefined;
 
   const uiProps: UiProps<TItem> = {
-    items: items as Array<AlgoliaHit<TItem>>,
+    items: items as Array<Hit<TItem>>,
     itemComponent,
     headerComponent,
     emptyComponent,
     layout,
     status,
-    sendEvent: () => {},
+    sendEvent,
   };
 
   return <TrendingItemsUiComponent {...props} {...uiProps} />;
diff --git a/packages/react-instantsearch/src/widgets/__tests__/FrequentlyBoughtTogether.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/FrequentlyBoughtTogether.test.tsx
index a338839ff6..b575351e54 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/FrequentlyBoughtTogether.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/FrequentlyBoughtTogether.test.tsx
@@ -50,14 +50,16 @@ describe('FrequentlyBoughtTogether', () => {
                 class="ais-FrequentlyBoughtTogether-item"
               >
                 {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-FrequentlyBoughtTogether-item"
               >
                 {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/packages/react-instantsearch/src/widgets/__tests__/LookingSimilar.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/LookingSimilar.test.tsx
index ccfe1c617e..7a3fffd5f4 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/LookingSimilar.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/LookingSimilar.test.tsx
@@ -47,14 +47,16 @@ describe('LookingSimilar', () => {
                 class="ais-LookingSimilar-item"
               >
                 {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-LookingSimilar-item"
               >
                 {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/packages/react-instantsearch/src/widgets/__tests__/RelatedProducts.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/RelatedProducts.test.tsx
index 5662be440e..cef758e96e 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/RelatedProducts.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/RelatedProducts.test.tsx
@@ -50,14 +50,16 @@ describe('RelatedProducts', () => {
                 class="ais-RelatedProducts-item"
               >
                 {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-RelatedProducts-item"
               >
                 {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
index ce6cb1c808..38fba596b3 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
@@ -47,14 +47,16 @@ describe('TrendingItems', () => {
                 class="ais-TrendingItems-item"
               >
                 {
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-TrendingItems-item"
               >
                 {
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/tests/common/widgets/frequently-bought-together/options.ts b/tests/common/widgets/frequently-bought-together/options.ts
index 93c412cba6..ea7522b2dd 100644
--- a/tests/common/widgets/frequently-bought-together/options.ts
+++ b/tests/common/widgets/frequently-bought-together/options.ts
@@ -59,7 +59,8 @@ export function createOptionsTests(
             }
           },
           "name": "Moschino Love – Shoulder bag",
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
@@ -74,7 +75,8 @@ export function createOptionsTests(
             }
           },
           "name": "Bag “Sabrina“ medium Gabs",
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
@@ -132,14 +134,16 @@ export function createOptionsTests(
                 class="ais-FrequentlyBoughtTogether-item"
               >
                 {
-          "objectID": "(1)"
+          "objectID": "(1)",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-FrequentlyBoughtTogether-item"
               >
                 {
-          "objectID": "(2)"
+          "objectID": "(2)",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/tests/common/widgets/looking-similar/options.ts b/tests/common/widgets/looking-similar/options.ts
index 4319213c5e..8b4138e544 100644
--- a/tests/common/widgets/looking-similar/options.ts
+++ b/tests/common/widgets/looking-similar/options.ts
@@ -59,7 +59,8 @@ export function createOptionsTests(
             }
           },
           "name": "Moschino Love – Shoulder bag",
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
@@ -74,7 +75,8 @@ export function createOptionsTests(
             }
           },
           "name": "Bag “Sabrina“ medium Gabs",
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
@@ -132,14 +134,16 @@ export function createOptionsTests(
                 class="ais-LookingSimilar-item"
               >
                 {
-          "objectID": "(1)"
+          "objectID": "(1)",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-LookingSimilar-item"
               >
                 {
-          "objectID": "(2)"
+          "objectID": "(2)",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/tests/common/widgets/related-products/options.ts b/tests/common/widgets/related-products/options.ts
index a3a3322e3e..ff52213ba1 100644
--- a/tests/common/widgets/related-products/options.ts
+++ b/tests/common/widgets/related-products/options.ts
@@ -55,7 +55,8 @@ export function createOptionsTests(
             }
           },
           "name": "Moschino Love – Shoulder bag",
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
@@ -70,7 +71,8 @@ export function createOptionsTests(
             }
           },
           "name": "Bag “Sabrina“ medium Gabs",
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
@@ -124,14 +126,16 @@ export function createOptionsTests(
                 class="ais-RelatedProducts-item"
               >
                 {
-          "objectID": "(1)"
+          "objectID": "(1)",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-RelatedProducts-item"
               >
                 {
-          "objectID": "(2)"
+          "objectID": "(2)",
+          "__position": 2
         }
               </li>
             </ol>
diff --git a/tests/common/widgets/trending-items/options.ts b/tests/common/widgets/trending-items/options.ts
index c2e77c3c3b..4c70000387 100644
--- a/tests/common/widgets/trending-items/options.ts
+++ b/tests/common/widgets/trending-items/options.ts
@@ -53,7 +53,8 @@ export function createOptionsTests(
             }
           },
           "name": "Moschino Love – Shoulder bag",
-          "objectID": "1"
+          "objectID": "1",
+          "__position": 1
         }
               </li>
               <li
@@ -68,7 +69,8 @@ export function createOptionsTests(
             }
           },
           "name": "Bag “Sabrina“ medium Gabs",
-          "objectID": "2"
+          "objectID": "2",
+          "__position": 2
         }
               </li>
             </ol>
@@ -121,14 +123,16 @@ export function createOptionsTests(
                 class="ais-TrendingItems-item"
               >
                 {
-          "objectID": "(1)"
+          "objectID": "(1)",
+          "__position": 1
         }
               </li>
               <li
                 class="ais-TrendingItems-item"
               >
                 {
-          "objectID": "(2)"
+          "objectID": "(2)",
+          "__position": 2
         }
               </li>
             </ol>