claudiainbytes

// Component con debounce
const SearchInput = ({ onSearch }) => {
  const [value, setValue] = useState('')

  useEffect(() => {
    const timer = setTimeout(() => {
      onSearch(value)
    }, 300)

    return () => clearTimeout(timer)

claudiainbytes

// test-utils/custom-render.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AuthProvider } from '@/contexts/AuthContext'
import { ThemeProvider } from '@/contexts/ThemeContext'

interface RenderOptions {
  initialUser?: User
  theme?: 'light' | 'dark'
  queryClient?: QueryClient
}

claudiainbytes

// test-utils/page-objects/LoginPage.ts
export class LoginPage {
  constructor(private user: ReturnType<typeof userEvent.setup>) {}

  async login(email: string, password: string) {
    await this.user.type(screen.getByLabelText(/email/i), email)
    await this.user.type(screen.getByLabelText(/password/i), password)
    await this.user.click(screen.getByRole('button', { name: /login/i }))
  }

claudiainbytes

it('sube archivo', async () => {
  const user = userEvent.setup()
  const handleUpload = vi.fn()
  
  render(<FileUpload onUpload={handleUpload} />)

  const file = new File(['hello'], 'hello.png', { type: 'image/png' })
  const input = screen.getByLabelText(/upload/i)

  await user.upload(input, file)

claudiainbytes

it('navega con teclado', async () => {
  const user = userEvent.setup()
  render(<Dropdown options={['Option 1', 'Option 2', 'Option 3']} />)

  const trigger = screen.getByRole('button', { name: /select/i })
  
  // Abrir con Enter
  await user.click(trigger)
  
  // Navegar con flechas

claudiainbytes

import { fireEvent } from '@testing-library/react'

it('permite drag and drop de items', async () => {
  const user = userEvent.setup()
  render(<DraggableList />)

  const item1 = screen.getByText('Item 1')
  const item2 = screen.getByText('Item 2')

  // Simular drag and drop

claudiainbytes

// Component
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true)
      const response = await fetch(`/api/users/${userId}`)
      const data = await response.json()

claudiainbytes

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // Deshabilitar reintentos en tests
      cacheTime: 0,
    },
  },
})

claudiainbytes

describe('Registration Form', () => {
  it('valida y envía formulario completo', async () => {
    const user = userEvent.setup()
    const handleSubmit = vi.fn()
    
    render(<RegistrationForm onSubmit={handleSubmit} />)

    // Llenar campos
    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
    await user.type(screen.getByLabelText(/password/i), 'SecurePass123!')

claudiainbytes

import { MemoryRouter, Routes, Route } from 'react-router-dom'

const renderWithRouter = (ui, { route = '/' } = {}) => {
  return render(
    <MemoryRouter initialEntries={[route]}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>