🎯 Basic Component Testing

Simple Render

import { render, screen } from '@testing-library/react'

test('renders component', () => {
  render(<MyComponent />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})

Render with Props

const props = {
  title: 'Test Title',
  onClick: jest.fn()
}
render(<MyComponent {...props} />)

Render with Context/Providers

const wrapper = ({ children }) => (
  <ThemeProvider theme={mockTheme}>
    <UserContext.Provider value={mockUser}>
      {children}
    </UserContext.Provider>
  </ThemeProvider>
)

render(<MyComponent />, { wrapper })

🔄 Testing State Changes

User Interactions

// Click events
const button = screen.getByRole('button')
fireEvent.click(button)

// Input changes
const input = screen.getByRole('textbox')
fireEvent.change(input, { target: { value: 'new value' } })

// Form submission
const form = screen.getByRole('form')
fireEvent.submit(form)

Prop Changes

const { rerender } = render(<Component initial={1} />)
expect(screen.getByText('1')).toBeInTheDocument()

rerender(<Component initial={2} />)
expect(screen.getByText('2')).toBeInTheDocument()

⏳ Async Testing

Basic Async Test

test('loads data', async () => {
  render(<DataComponent />)

  // Wait for element
  const element = await screen.findByText('Loaded')
  expect(element).toBeInTheDocument()
})

Using waitFor

await waitFor(() => {
  expect(screen.getByText('Loaded')).toBeInTheDocument()
})

Timer Mocks

jest.useFakeTimers()
jest.advanceTimersByTime(1000)
jest.runAllTimers()
jest.useRealTimers()

🎭 Mocking