test(Tooltip): use useEvent instead of fireEvent & remove setTimeout

shervinchen · Apr 23, 2024 · 90429ca · 90429ca
1 parent a1153e2
commit 90429ca
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/packages/Tooltip/Tooltip.tsx b/packages/Tooltip/Tooltip.tsx
@@ -54,6 +54,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
           style={{
             opacity: stage === 'enter' ? 1 : 0,
           }}
+          data-testid="tooltipContent"
         >
           {!hideArrow && <TooltipArrow targetRef={ref} placement={placement} />}
           {content}

diff --git a/packages/Tooltip/__tests__/Tooltip.test.tsx b/packages/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Tooltip from '..';
+import userEvent from '@testing-library/user-event';
 
 describe('Tooltip', () => {
   test('should match the snapshot', () => {
@@ -19,38 +20,34 @@ describe('Tooltip', () => {
     expect(container.firstChild).toHaveClass('custom-tooltip');
   });
 
-  test('should show tooltip when mouse over target', () => {
+  test('should show tooltip when mouse over target', async () => {
+    const user = userEvent.setup();
     render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
     const element = document.querySelector('.raw-tooltip');
-    fireEvent.mouseOver(element);
-    setTimeout(() => {
-      expect('I am a tooltip').toBeInTheDocument();
-    }, 50);
+    await user.hover(element);
+    expect(screen.getByText('I am a tooltip')).toBeInTheDocument();
   });
 
-  test('should hide tooltip when mouse out target', () => {
+  test('should hide tooltip when mouse out target', async () => {
+    const user = userEvent.setup();
     render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
     const element = document.querySelector('.raw-tooltip');
-    fireEvent.mouseOver(element);
-    setTimeout(() => {
-      expect('I am a tooltip').toBeInTheDocument();
-    }, 50);
-    fireEvent.mouseOut(element);
-    setTimeout(() => {
-      expect('I am a tooltip').not.toBeInTheDocument();
-    }, 50);
+    await user.hover(element);
+    const tooltipContent = screen.getByTestId('tooltipContent');
+    expect(tooltipContent).toBeInTheDocument();
+    await user.unhover(element);
+    expect(tooltipContent).not.toBeInTheDocument();
   });
 
-  test('should support disabled tooltip', () => {
+  test('should support disabled tooltip', async () => {
+    const user = userEvent.setup();
     render(
       <Tooltip content="I am a tooltip" disabled>
         Hover me
       </Tooltip>
     );
     const element = document.querySelector('.raw-tooltip');
-    fireEvent.mouseOver(element);
-    setTimeout(() => {
-      expect('I am a tooltip').not.toBeInTheDocument();
-    }, 50);
+    await user.hover(element);
+    expect(screen.queryByTestId('tooltipContent')).not.toBeInTheDocument();
   });
 });