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..680b0c9ae --- /dev/null +++ b/src/components/ui/Tooltip/tests/Tooltip.lazyMount.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render, screen } 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 user.hover(screen.getByText('Hover me')); + expect(screen.getByText('Tooltip label')).toBeInTheDocument(); + }); +});