Greeting.test.jsx
export default function Greeting( name ) return <h1>Hello, name!</h1>; testing library/react
import render, screen from '@testing-library/react'; import Greeting from './Greeting'; test('displays the correct greeting', () => render(<Greeting name="Alice" />); const heading = screen.getByText(/hello, alice!/i); expect(heading).toBeInTheDocument(); ); Use userEvent (recommended over fireEvent for realistic behavior): Greeting
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event In your test setup file: screen from '@testing-library/react'
import render, screen from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ToggleButton from './ToggleButton'; test('toggles text on click', async () => const user = userEvent.setup(); render(<ToggleButton />);