React Testing Library And Jest- The Complete - Guide

// Test const customRender = (ui, providerProps, ...renderOptions ) => return render( <ThemeProvider ...providerProps>ui</ThemeProvider>, renderOptions )

// Use userEvent instead of fireEvent await user.click(button)

getBy for things that must exist, queryBy to check for absence, findBy for async. User Interactions Always use userEvent over fireEvent (it simulates full browser behavior).

export default testEnvironment: 'jsdom', setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'], transform: tsx)$': 'babel-jest', , React Testing Library and Jest- The Complete Guide

test('loads and displays user', async () => const mockUser = name: 'John Doe' fetch.mockResolvedValueOnce( json: async () => mockUser, )

render(<UserProfile userId=1 />)

// Don't test props passed to children expect(ChildComponent).toHaveBeenCalledWith( prop: 'value' ) // Test const customRender = (ui, providerProps,

import '@testing-library/jest-dom/vitest' // or 'jest-dom' Component to test ( Button.jsx ) export const Button = ( onClick, children, disabled = false ) => ( <button onClick=onClick disabled=disabled> children </button> ) Test file ( Button.test.jsx ) import render, screen from '@testing-library/react' import userEvent from '@testing-library/user-event' import Button from './Button' test('renders button with children and handles click', async () => const handleClick = jest.fn() const user = userEvent.setup()

jest.useRealTimers() // restore Controlled component const Toggle = () => const [on, setOn] = useState(false) return ( <button onClick=() => setOn(!on)> on ? 'ON' : 'OFF' </button> )

await user.click(button) expect(button).toHaveTextContent('OFF') ) test('shows error for invalid email', async () => const user = userEvent.setup() render(<SignupForm />) await user.type(screen.getByLabelText(/email/i), 'invalid') await user.click(screen.getByRole('button', name: /submit/i )) 'ON' : 'OFF' &lt;/button&gt; ) await user

const button = screen.getByRole('button') expect(button).toHaveTextContent('OFF')

// Don't use act directly (userEvent handles it) act(() => render(<Component />) )

render(<Button onClick=handleClick>Click Me</Button>)

expect(screen.getByText('Done')).toBeInTheDocument() )