Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I thought this was the solution for jest but naaahhh #1278

Closed
allestaire opened this issue Dec 1, 2023 · 5 comments
Closed

I thought this was the solution for jest but naaahhh #1278

allestaire opened this issue Dec 1, 2023 · 5 comments

Comments

@allestaire
Copy link

allestaire commented Dec 1, 2023

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

Screen Shot 2023-12-01 at 11 33 23 PM
// 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()
  })
})
Copy link

github-actions bot commented Dec 1, 2023

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.

1 similar comment
Copy link

github-actions bot commented Dec 1, 2023

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
Copy link
Author

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

@allestaire
Copy link
Author

@allestaire
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant