fix: tests

Author: danielbarion

package.json

@@ -64,7 +64,7 @@
     "@rollup/plugin-typescript": "12.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/css": "0.0.38",
     "@types/css-modules": "1.0.5",
@@ -98,8 +98,8 @@
     "postcss": "8.5.10",
     "prettier": "3.8.3",
     "process": "0.11.10",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rimraf": "6.1.3",
     "rollup": "4.60.1",
     "rollup-plugin-analyzer": "4.0.0",

src/components/Tooltip/use-tooltip-anchors.tsx

@@ -56,7 +56,8 @@ const useTooltipAnchors = ({
     } catch {
       return false
     }
-  }, [activeAnchor, selector])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeAnchor, selector, anchorElements])
 
   useEffect(() => {
     if (!selector || !trackAnchors) {

src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -114,7 +114,7 @@ exports[`tooltip props tooltip with float 1`] = `
     </div>
     <div
       class="react-tooltip-arrow"
-      style="--rt-arrow-size: 8px; left: -1px; bottom: -3px;"
+      style="--rt-arrow-size: 8px; left: 0px; bottom: -3px;"
     />
   </div>
 </div>

src/test/tooltip-attributes.spec.js

@@ -36,14 +36,14 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toHaveAttribute('style')
-
-    expect(anchorElement).toHaveAttribute('data-tooltip-content')
     await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
       expect(anchorElement).toHaveAttribute('aria-describedby', 'basic-example-attr')
     })
-    expect(tooltip).toBeInTheDocument()
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-content')
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
   })
 
   test('tooltip with place', async () => {
@@ -58,15 +58,15 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toHaveAttribute('style')
-
-    expect(anchorElement).toHaveAttribute('data-tooltip-place')
-    expect(anchorElement).toHaveAttribute('data-tooltip-content')
     await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
       expect(anchorElement).toHaveAttribute('aria-describedby', 'example-place-attr')
     })
-    expect(tooltip).toBeInTheDocument()
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-place')
+    expect(anchorElement).toHaveAttribute('data-tooltip-content')
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
   })
 
   test('tooltip with class name', async () => {
@@ -81,13 +81,13 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toHaveClass('tooltip-class-name')
-
-    expect(anchorElement).toHaveAttribute('data-tooltip-class-name')
     await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveClass('tooltip-class-name')
       expect(anchorElement).toHaveAttribute('aria-describedby', 'example-class-name-attr')
     })
-    expect(tooltip).toBeInTheDocument()
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-class-name')
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
   })
 })

src/test/tooltip-close-and-delay-behavior.spec.js

@@ -77,6 +77,10 @@ describe('tooltip close and delay behavior', () => {
     expect(screen.getByRole('tooltip')).toBeInTheDocument()
 
     fireEvent.mouseLeave(tooltip)
+    advanceTimers(100)
+    // Second advancement needed: the first fires handleShow(false) timeout,
+    // which creates the missedTransitionTimer during the effect flush
+    advanceTimers(100)
     await waitForTooltipToClose('clickable-no-click-test')
   })
 

src/test/tooltip-props.spec.js

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import { TooltipController as Tooltip } from '../components/TooltipController'
@@ -160,15 +160,27 @@ describe('tooltip props', () => {
     const { container } = render(<TooltipProps id="example-float" content="Hello World!" float />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    await userEvent.hover(anchorElement)
+    // Use act to ensure state updates and effects are flushed between steps
+    await act(async () => {
+      fireEvent.mouseEnter(anchorElement)
+    })
+
+    // Fire pointermove after activeAnchor is set (batching in older React prevents it during hover)
+    await act(async () => {
+      anchorElement.dispatchEvent(
+        new MouseEvent('pointermove', { clientX: 5, clientY: 0, bubbles: true }),
+      )
+      // Allow microtask (computeTooltipPosition promise) to resolve
+      await new Promise((r) => setTimeout(r, 50))
+    })
 
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toHaveAttribute('style')
     await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
       expect(anchorElement).toHaveAttribute('aria-describedby', 'example-float')
     })
 
-    expect(tooltip).toBeInTheDocument()
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
 
@@ -197,9 +209,12 @@ describe('tooltip props', () => {
     const anchorElement = screen.getByText('Lorem Ipsum')
     await userEvent.hover(anchorElement)
 
-    const tooltip = await screen.findByRole('tooltip')
+    await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toBeInTheDocument()
+      expect(tooltip).toHaveClass('react-tooltip__show')
+    })
 
-    expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })