I thought this was the solution for jest but naaahhh

[allestaire]

This test wont work when a component having useRef or any hooks

// Tooltip.jsx
import PropTypes from 'prop-types'
import { useEffect, useMemo, useRef } from 'react'

const Tooltip = ({
  id = 'tooltip',
  message,
  children
}) => {
  const el = useRef(null)
  const containerId = useMemo(() => {
    return 'tooltip-' + id
  }, [id])
  useEffect(() => {
    setTimeout(() => {
      try {
        new HSTooltip(el.current)
      } catch (e) {
        console.log(e)
      }
    }, 300)
  }, [])
  return (
    <div className="hs-tooltip inline-block">
      <div className='hs-tooltip-toggle'>
        {children}
      </div>
      <span ref={el} id={containerId} className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
        {message}
      </span>
    </div>
  )
}
Tooltip.propTypes = {
  id: PropTypes.string,
  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  children: PropTypes.element
}

export default Tooltip

// component.test.js

import React from 'react'
import Tooltip from 'itpi-library/components/Tooltip'
import { render, screen } from '@testing-library/react'

describe('Tooltip', function() {
  test('Can render', async () => {
    render(
      <Tooltip
        id="test"
        message="Hi there"
      >
        <p>Just a wrapper</p>
      </Tooltip>
    )

    expect(screen.queryByText(testMessage)).toBeNull()
  })
})

[github-actions[bot]]

Uh oh! @allestaire, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions[bot]]

Uh oh! @allestaire, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[allestaire]

Out of all the examples, useRef is not included, tsk tsk Testing Library

[allestaire]

Why it is working on this example but not on my local machine https://codesandbox.io/p/sandbox/how-to-test-useref-with-testing-libraryreact-tf8kq?file=%2Fsrc%2F__tests__%2FMeasureMe.test.js%3A7%2C33-7%2C48

[allestaire]

Sorry for the rant, The issue is, there are 2 react installed whic is from source and test forlder, in order to solve the issue I must use the source react instead of from test react

One way to solve is: npm link ../src/node_modules/react