Set up Vitest + Testing Library and add unit tests for the marketplace components

[greatest0fallt1me]

Description

The project has no test runner: package.json:6-10 exposes only dev, build, and preview, and there are no Vitest/Testing Library dependencies anywhere in the repo. Yet the marketplace already contains testable logic — MarketplacePage filters/sorts MOCK_APIS and debounces search (src/pages/MarketplacePage.tsx:47-100), SearchBar handles Escape-to-clear and Enter-to-search (src/components/SearchBar.tsx:19-31), FiltersSidebar validates inverted price ranges (src/components/FiltersSidebar.tsx:63-105), and useDebounce is a pure hook (src/hooks/useDebounce.ts:12-26).

This issue establishes the testing foundation and adds unit tests for these marketplace pieces.

Requirements and context

• Add devDependencies: vitest, @testing-library/react, @testing-library/user-event, @testing-library/jest-dom, jsdom.
• Add a vitest.config.ts (or test block in vite.config.ts) with environment: "jsdom", a src/test/setup.ts importing @testing-library/jest-dom, and scripts "test": "vitest run" and "test:watch": "vitest".
• Tests to add:
  • useDebounce delays updates (fake timers) — src/hooks/useDebounce.ts.
  • SearchBar calls onChange("") on Escape and onSearch on Enter, and the clear button appears only with a value — src/components/SearchBar.tsx:19-33,104-144.
  • FiltersSidebar shows the inverted-range alert and sets aria-invalid when minPrice > maxPrice — src/components/FiltersSidebar.tsx:63-105.
  • ApiCard renders name/price/tags and fires onViewDetails on click and Enter — src/components/ApiCard.tsx:66-179.
  • MarketplacePage filters by query/category and shows the empty state when nothing matches — src/pages/MarketplacePage.tsx:47-188.
• Non-functional: tests must be deterministic (control the setTimeout loaders with fake timers, e.g. src/pages/MarketplacePage.tsx:26).

Acceptance criteria

• Vitest + Testing Library configured with a jsdom environment and a setup file.
• npm run test runs and passes locally.
• Unit tests exist for useDebounce, SearchBar, FiltersSidebar, ApiCard, and MarketplacePage.
• Tests cover the price-range validation and the empty-state branch.
• No reliance on real timers (loaders are faked).

Suggested execution

1. Fork the repo and create a branch — git checkout -b testing/vitest-marketplace.

2. Implement changes — add the Vitest config and src/test/setup.ts; add *.test.tsx files next to the components above.

3. Write/extend tests — this is the test-runner setup itself: install Vitest + @testing-library/react + jsdom, wire environment: "jsdom", and add the "test": "vitest run" command.

4. Test and commit —

npm install
npm run test
npm run build

Example commit message

test(marketplace): set up Vitest and add unit tests for marketplace components

Guidelines

• Each component under test must reach ≥90% line coverage (run vitest run --coverage).
• Assert accessible queries (getByRole, getByLabelText) rather than test ids; document the new npm run test workflow in the README.
• Timeframe: 96 hours.