From fa0049f7f8841e640228405484d30f7eceeb0167 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Mon, 23 Feb 2026 21:16:20 +0100
Subject: [PATCH] fix: use proper ESM imports in test setup for TypeScript
 compatibility

Replace require('react') with ESM imports of createElement and types
from React. This fixes the TS2591 error in tsc build for setup.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/test/setup.ts | 73 +++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 38 deletions(-)

diff --git a/src/test/setup.ts b/src/test/setup.ts
index 705a15e4..966dc7cc 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,43 +1,40 @@
 import '@testing-library/jest-dom/vitest'
 import { vi } from 'vitest'
+import { createElement, type ReactNode, type ComponentType } from 'react'
 
 // Mock react-virtuoso: JSDOM has no real viewport, so render all items directly
-vi.mock('react-virtuoso', () => {
-  const React = require('react')
-  return {
-    Virtuoso: ({ data, itemContent, components }: {
-      data?: unknown[]
-      itemContent?: (index: number, item: unknown) => React.ReactNode
-      components?: { Header?: React.ComponentType }
-    }) => {
-      const Header = components?.Header
-      return React.createElement('div', { 'data-testid': 'virtuoso-mock' },
-        Header ? React.createElement(Header) : null,
-        data?.map((item: unknown, index: number) =>
-          React.createElement('div', { key: index }, itemContent?.(index, item))
+vi.mock('react-virtuoso', () => ({
+  Virtuoso: ({ data, itemContent, components }: {
+    data?: unknown[]
+    itemContent?: (index: number, item: unknown) => ReactNode
+    components?: { Header?: ComponentType }
+  }) => {
+    const Header = components?.Header
+    return createElement('div', { 'data-testid': 'virtuoso-mock' },
+      Header ? createElement(Header) : null,
+      data?.map((item: unknown, index: number) =>
+        createElement('div', { key: index }, itemContent?.(index, item))
+      )
+    )
+  },
+  GroupedVirtuoso: ({ groupCounts, groupContent, itemContent }: {
+    groupCounts: number[]
+    groupContent: (index: number) => ReactNode
+    itemContent: (index: number, groupIndex: number) => ReactNode
+  }) => {
+    let globalIndex = 0
+    return createElement('div', { 'data-testid': 'grouped-virtuoso-mock' },
+      groupCounts?.map((count: number, groupIndex: number) => {
+        const items = []
+        for (let i = 0; i < count; i++) {
+          items.push(createElement('div', { key: globalIndex }, itemContent(globalIndex, groupIndex)))
+          globalIndex++
+        }
+        return createElement('div', { key: `group-${groupIndex}` },
+          groupContent(groupIndex),
+          ...items
         )
-      )
-    },
-    GroupedVirtuoso: ({ groupCounts, groupContent, itemContent }: {
-      groupCounts: number[]
-      groupContent: (index: number) => React.ReactNode
-      itemContent: (index: number, groupIndex: number) => React.ReactNode
-    }) => {
-      const React = require('react')
-      let globalIndex = 0
-      return React.createElement('div', { 'data-testid': 'grouped-virtuoso-mock' },
-        groupCounts?.map((count: number, groupIndex: number) => {
-          const items = []
-          for (let i = 0; i < count; i++) {
-            items.push(React.createElement('div', { key: globalIndex }, itemContent(globalIndex, groupIndex)))
-            globalIndex++
-          }
-          return React.createElement('div', { key: `group-${groupIndex}` },
-            groupContent(groupIndex),
-            ...items
-          )
-        })
-      )
-    },
-  }
-})
+      })
+    )
+  },
+}))