diff --git a/src/components/ui/Tooltip/tests/Tooltip.lazyMount.test.tsx b/src/components/ui/Tooltip/tests/Tooltip.lazyMount.test.tsx new file mode 100644 index 000000000..f79be3711 --- /dev/null +++ b/src/components/ui/Tooltip/tests/Tooltip.lazyMount.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { act, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Tooltip from '../Tooltip'; + +describe('Tooltip lazy mount', () => { + test('does not mount tooltip content until opened', () => { + render( + + Hover me + Tooltip label + + ); + + expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument(); + }); + + test('mounts content after hover opens the tooltip', async() => { + const user = userEvent.setup(); + + render( + + Hover me + Tooltip label + + ); + + await act(async() => { + await user.hover(screen.getByText('Hover me')); + }); + await waitFor(() => { + expect(screen.getByText('Tooltip label')).toBeInTheDocument(); + }); + }); +});