# Create React App (built-in) — just run:
npm test

# Vite / Next.js — install manually:
npm install -D jest @types/jest ts-jest jest-environment-jsdom
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

// jest.config.ts
import type { Config } from 'jest'

const config: Config = {
  preset:           'ts-jest',
  testEnvironment:  'jsdom',           // browser-like DOM (vs 'node')
  setupFilesAfterEach: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',   // path aliases
    '\.(css|scss)$': 'identity-obj-proxy', // CSS modules
  },
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 80, statements: 80 },
  },
}
export default config

// jest.setup.ts — runs after test framework is installed
import '@testing-library/jest-dom'     // adds .toBeInTheDocument() etc.

// global fetch polyfill (Node < 18)
import 'whatwg-fetch'

// Optional: silence console.error in tests
beforeEach(() => {
  jest.spyOn(console, 'error').mockImplementation(() => {})
})
afterEach(() => {
  jest.restoreAllMocks()
})

// jest.fn() creates a mock function that records calls
const onClick = jest.fn()

render(<Button onClick={onClick}>Click me</Button>)
await userEvent.click(screen.getByRole('button'))

expect(onClick).toHaveBeenCalledTimes(1)
expect(onClick).toHaveBeenCalledWith(/* args */)

// Control the return value
const fetchUser = jest.fn().mockResolvedValue({ id: 1, name: 'Alice' })
const fetchUser = jest.fn()
  .mockResolvedValueOnce({ id: 1 })   // first call
  .mockRejectedValueOnce(new Error()) // second call throws

// Inspect call history
fetchUser.mock.calls         // [[arg1, arg2], [arg1], …]
fetchUser.mock.results       // [{ type: 'return', value: … }, …]
fetchUser.mock.instances     // 'this' context of each call

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

// render() mounts the component in jsdom
// screen is a global query object bound to document.body
it('shows greeting', () => {
  render(<Greeting name="Alice" />)

  // getBy* — throws if not found (use for elements that should exist)
  const heading = screen.getByRole('heading', { name: /hello alice/i })
  expect(heading).toBeInTheDocument()

  // getByText — shortcut when role is irrelevant
  expect(screen.getByText(/welcome/i)).toBeVisible()
})

// within() — scope queries to a sub-tree
import { within } from '@testing-library/react'

it('shows items in a list', () => {
  render(<TodoList items={['Buy milk', 'Read book']} />)
  const list = screen.getByRole('list')
  const items = within(list).getAllByRole('listitem')
  expect(items).toHaveLength(2)
})

import { renderHook, act } from '@testing-library/react'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('initialises with default value', () => {
    const { result } = renderHook(() => useCounter())
    expect(result.current.count).toBe(0)
  })

  it('increments', () => {
    const { result } = renderHook(() => useCounter(10))

    // act() wraps any interaction that triggers state updates
    act(() => { result.current.increment() })

    expect(result.current.count).toBe(11)
  })

  it('exposes a reset function', () => {
    const { result } = renderHook(() => useCounter(5))
    act(() => {
      result.current.increment()
      result.current.reset()
    })
    expect(result.current.count).toBe(5)
  })
})

npm install -D msw

// src/mocks/handlers.ts — define route handlers
import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice', role: 'admin' },
      { id: 2, name: 'Bob',   role: 'user'  },
    ])
  }),

  http.post('/api/users', async ({ request }) => {
    const body = await request.json() as { name: string }
    return HttpResponse.json({ id: 3, ...body }, { status: 201 })
  }),

  http.get('/api/users/:id', ({ params }) => {
    const { id } = params
    if (id === '999') return new HttpResponse(null, { status: 404 })
    return HttpResponse.json({ id: Number(id), name: 'Alice' })
  }),
]

// src/mocks/server.ts — Node server for Jest/Vitest
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

// jest.setup.ts — wire up the server
import { server } from './src/mocks/server'
beforeAll(()  => server.listen({ onUnhandledRequest: 'error' }))
afterEach(()  => server.resetHandlers())  // don't leak overrides
afterAll(()   => server.close())

// Component snapshot
it('renders correctly', () => {
  const { container } = render(<Badge variant="success" label="Active" />)
  expect(container.firstChild).toMatchSnapshot()
})

// Inline snapshots — stored in the test file itself (diffs are reviewable)
it('renders badge markup', () => {
  const { container } = render(<Badge variant="success" label="Active" />)
  expect(container.firstChild).toMatchInlineSnapshot(`
    <span
      class="badge badge-success"
    >
      Active
    </span>
  `)
})

// Update snapshots after intentional design change
jest --updateSnapshot    # or: jest -u
vitest --update-snapshots

// A full checkout flow test
it('user can add to cart and checkout', async () => {
  const user = userEvent.setup()
  server.use(
    http.post('/api/orders', () => HttpResponse.json({ id: 'ord-123' }, { status: 201 }))
  )

  render(<App />, { wrapper: AllProviders })

  // Navigate to product
  await user.click(screen.getByRole('link', { name: /shop/i }))
  await screen.findByRole('heading', { name: /products/i })

  // Add item to cart
  const addBtn = screen.getAllByRole('button', { name: /add to cart/i })[0]
  await user.click(addBtn)
  expect(screen.getByRole('status')).toHaveTextContent('1 item in cart')

  // Checkout
  await user.click(screen.getByRole('link', { name: /cart/i }))
  await user.click(screen.getByRole('button', { name: /checkout/i }))
  await screen.findByText(/order confirmed/i)
  expect(screen.getByText(/ord-123/i)).toBeInTheDocument()
})

// jest.config.ts — differentiated thresholds
coverageThreshold: {
  // Global floor — enforced across all files
  global: {
    statements: 70, branches: 65, functions: 70, lines: 70,
  },
  // Per-file floor for critical modules
  './src/lib/pricing.ts': {
    statements: 95, branches: 90, functions: 95, lines: 95,
  },
  './src/lib/auth.ts': {
    statements: 95, branches: 90, functions: 95, lines: 95,
  },
},

// Exclude from coverage
coveragePathIgnorePatterns: [
  '/node_modules/',
  '/src/test-utils.tsx',    // test infrastructure
  '/src/mocks/',            // MSW handlers
  '\.d\.ts$',            // type declarations
  '/stories/',              // Storybook
],

// Collect only from source (not test files)
collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.test.{ts,tsx}']

// These ALL wrap act() for you — no manual act() needed:
render(<MyComponent />)                      // ✅
await userEvent.click(button)               // ✅
await userEvent.type(input, 'hello')        // ✅
await waitFor(() => expect(...))            // ✅
await screen.findByRole('heading')          // ✅

// renderHook act() is also handled for sync hooks:
const { result } = renderHook(() => useState(0))
// But state-changing calls need manual act():
act(() => { result.current[1](42) })        // ✅ manual for renderHook mutations

import { MemoryRouter, Route, Routes } from 'react-router-dom'
import { render, screen } from '@testing-library/react'

// Wrap component in MemoryRouter to provide routing context
function renderWithRouter(
  ui: ReactElement,
  { initialEntries = ['/'] } = {}
) {
  return render(
    <MemoryRouter initialEntries={initialEntries}>
      {ui}
    </MemoryRouter>
  )
}

it('renders home page by default', () => {
  renderWithRouter(
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  )
  expect(screen.getByRole('heading', { name: /home/i })).toBeInTheDocument()
})

it('renders about page at /about', () => {
  renderWithRouter(
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>,
    { initialEntries: ['/about'] }   // start at /about
  )
  expect(screen.getByRole('heading', { name: /about/i })).toBeInTheDocument()
})

// api.ts
export async function getUser(id: number): Promise<User> {
  const res = await fetch('/api/users/' + id)
  return res.json()
}

// UserCard.test.ts
import { getUser } from './api'
jest.mock('./api')

// ✘ Old way — loses type safety
;(getUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' })

// ✅ New way — fully typed, IDE autocomplete works
const mockedGetUser = jest.mocked(getUser)
mockedGetUser.mockResolvedValue({ id: 1, name: 'Alice' })  // types enforced!
mockedGetUser.mockRejectedValue(new Error('Not found'))

expect(mockedGetUser).toHaveBeenCalledWith(1)
expect(mockedGetUser).toHaveBeenCalledTimes(1)

// Component with a data-fetching effect
function UserProfile({ userId }: { userId: number }) {
  const [user, setUser]     = useState<User | null>(null)
  const [error, setError]   = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false       // cleanup flag for race conditions
    setLoading(true)
    fetchUser(userId)
      .then(u  => { if (!cancelled) { setUser(u); setLoading(false) } })
      .catch(e => { if (!cancelled) { setError(e.message); setLoading(false) } })
    return () => { cancelled = true }   // cleanup on unmount / id change
  }, [userId])

  if (loading) return <div role="progressbar">Loading…</div>
  if (error)   return <div role="alert">{error}</div>
  return <h1>{user?.name}</h1>
}

// Test — MSW intercepts fetch, RTL awaits DOM change
it('fetches and displays user', async () => {
  render(<UserProfile userId={1} />)
  expect(screen.getByRole('progressbar')).toBeInTheDocument()      // loading state
  await screen.findByRole('heading', { name: /alice/i })           // data loaded
})

it('shows error when fetch fails', async () => {
  server.use(http.get('/api/users/1', () => new HttpResponse(null, { status: 500 })))
  render(<UserProfile userId={1} />)
  await screen.findByRole('alert')   // error state
})

// These two are identical:
const btn = await screen.findByRole('button', { name: /submit/i })
const btn = await waitFor(() => screen.getByRole('button', { name: /submit/i }))

// Configure timeout and interval
await screen.findByText(/loaded/i, {}, { timeout: 3000, interval: 100 })
await waitFor(
  () => expect(screen.getByText(/loaded/i)).toBeInTheDocument(),
  { timeout: 3000, interval: 100 }
)

// findByRole returns the element — useful for chaining
const input = await screen.findByRole('textbox', { name: /email/i })
expect(input).toHaveValue('alice@example.com')

// ✘ Causes the warning — fetch resolves after test ends
it('renders', () => {              // no async!
  render(<UserList />)             // kicks off a fetch
  expect(screen.getByText(/loading/i)).toBeInTheDocument()
  // test ends here — fetch resolves → setState → warning!
})

// ✅ Fix 1 — make the test async and await the DOM
it('renders', async () => {
  render(<UserList />)
  await screen.findByRole('listitem')   // waits for data + state update
})

// ✅ Fix 2 — if you can't await, suppress the pending update
it('renders loading state only', async () => {
  render(<UserList />)
  expect(screen.getByRole('progressbar')).toBeInTheDocument()
  // wait for outstanding state updates before test exits
  await waitFor(() => {})
})