import React, { useState } from 'react'; import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Dialog } from './Dialog'; const DialogComponent: React.FC = () => { const [showDialog, setShowDialog] = useState(false); return ( <> setShowDialog(false)} title='This is a dialog' actions={} /> ); }; describe('Dialog', () => { it('should open and close the dialog', async () => { render(); // Should not show by default expect(screen.queryByText('This is a dialog')).not.toBeInTheDocument(); // Should show after clicking button await userEvent.click(screen.getByRole('button', { name: 'Click Me' })); await screen.findByText('This is a dialog'); // Should hide after clicking Close await userEvent.click(screen.getByRole('button', { name: 'Close' })); await waitForElementToBeRemoved(() => screen.queryByText('This is a dialog')); }); });