Fix the tests to include the tooltip element in the snapshot

package.json

@@ -49,9 +49,12 @@
     "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-replace": "4.0.0",
     "@rollup/plugin-typescript": "8.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/css": "^0.0.33",
     "@types/css-modules": "^1.0.2",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "29.4.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^18.0.0",
@@ -68,17 +71,16 @@
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^8.0.1",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-transform-css": "^6.0.0",
+    "jest": "29.4.2",
+    "jest-environment-jsdom": "29.4.2",
+    "jest-transform-css": "6.0.1",
     "lint-staged": "13.0.3",
     "postcss": "8.4.19",
     "prettier": "^2.4.1",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-test-renderer": "16.14.0",
     "rimraf": "^3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -96,9 +98,9 @@
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">=16.14.0",

src/App.tsx

@@ -19,7 +19,14 @@ function WithProviderMinimal() {
         </TooltipWrapper>
       </p>
       <Tooltip clickable>
-        <button>button</button>
+        <button
+          onClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('button clicked')
+          }}
+        >
+          button
+        </button>
       </Tooltip>
     </section>
   )

src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useLayoutEffect } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { TooltipContent } from 'components/TooltipContent'
@@ -50,6 +50,19 @@ const Tooltip = ({
   const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
   const hoveringTooltip = useRef(false)
+  const mounted = useRef(false)
+
+  /**
+   * useLayoutEffect runs before useEffect,
+   * but should be used carefully because of caveats
+   * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
+   */
+  useLayoutEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+    }
+  }, [])
 
   useEffect(() => {
     if (!show) {
@@ -58,12 +71,20 @@ const Tooltip = ({
   }, [show])
 
   const handleShow = (value: boolean) => {
+    if (!mounted.current) {
+      return
+    }
+
     setRendered(true)
     /**
      * wait for the component to render and calculate position
      * before actually showing
      */
     setTimeout(() => {
+      if (!mounted.current) {
+        return
+      }
+
       setIsOpen?.(value)
       if (isOpen === undefined) {
         setShow(value)
@@ -345,7 +366,7 @@ const Tooltip = ({
     if (position) {
       // if `position` is set, override regular and `float` positioning
       handleTooltipPosition(position)
-      return () => null
+      return
     }
 
     if (float) {
@@ -360,15 +381,14 @@ const Tooltip = ({
         handleTooltipPosition(lastFloatPosition.current)
       }
       // if `float` is set, override regular positioning
-      return () => null
+      return
     }
 
     let elementReference = activeAnchor.current
     if (anchorId) {
       // `anchorId` element takes precedence
       elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement
     }
-    let mounted = true
     computeTooltipPosition({
       place,
       offset,
@@ -378,7 +398,7 @@ const Tooltip = ({
       strategy: positionStrategy,
       middlewares,
     }).then((computedStylesData) => {
-      if (!mounted) {
+      if (!mounted.current) {
         // invalidate computed positions after remount
         return
       }
@@ -389,9 +409,6 @@ const Tooltip = ({
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
     })
-    return () => {
-      mounted = false
-    }
   }, [show, anchorId, activeAnchor, content, html, place, offset, positionStrategy, position])
 
   useEffect(() => {

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip attributes basic tooltip 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+    id="basic-example-attr"
+  >
+    Lorem Ipsum
+  </span>
+  <div
+    class="react-tooltip"
+    role="tooltip"
+  >
+    Hello World!
+    <div
+      class="react-tooltip-arrow"
+    />
+  </div>
+</div>
+`;
+
+exports[`tooltip attributes tooltip with place 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+    data-tooltip-place="right"
+    id="example-place-attr"
+  >
+    Lorem Ipsum
+  </span>
+  <div
+    class="react-tooltip"
+    role="tooltip"
+  >
+    Hello World!
+    <div
+      class="react-tooltip-arrow"
+    />
+  </div>
+</div>
+`;
+
+exports[`tooltip attributes tooltip without element reference 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+  >
+    Lorem Ipsum
+  </span>
+</div>
+`;