Fix sports.test.tsx timeout: mock SportIcon to eliminate async image-error state updates #77

Merged

chrisp merged 1 commit from fix/sports-test-timeout into main

2026-06-06 17:34:15 +00:00

chrisp commented

2026-06-06 17:28:00 +00:00

Owner

Summary

`SportIcon` renders `` elements whose `onError` callback calls `setFailed(true)`, scheduling state updates asynchronously outside React's `act()` window in jsdom
With NFL and F1 both having real icon URLs, the Sports page renders two `` elements that fire `onError` in jsdom, causing the synchronous render test to hit the 5000ms Vitest default timeout intermittently
Fix: mock `~/components/SportIcon` in the test so no `` elements with async error handlers are created; uses `resolveSportIconUrl()` directly in the factory so the mock stays in sync with the real URL resolution logic rather than duplicating the regex inline

Test plan

`npm run test:run -- app/routes/tests/sports.test.tsx` — both tests pass in ~200ms (was hitting 5000ms timeout)
`npm run test:run` — full suite still green

## Summary - \`SportIcon\` renders \`<img>\` elements whose \`onError\` callback calls \`setFailed(true)\`, scheduling state updates asynchronously outside React's \`act()\` window in jsdom - With NFL and F1 both having real icon URLs, the Sports page renders two \`<img>\` elements that fire \`onError\` in jsdom, causing the synchronous render test to hit the 5000ms Vitest default timeout intermittently - Fix: mock \`~/components/SportIcon\` in the test so no \`<img>\` elements with async error handlers are created; uses \`resolveSportIconUrl()\` directly in the factory so the mock stays in sync with the real URL resolution logic rather than duplicating the regex inline ## Test plan - \`npm run test:run -- app/routes/__tests__/sports.test.tsx\` — both tests pass in ~200ms (was hitting 5000ms timeout) - \`npm run test:run\` — full suite still green

chrisp added 1 commit 2026-06-06 17:28:01 +00:00

Fix sports.test.tsx timeout: mock SportIcon to eliminate async image-error state updates

🚀 Deploy / 🧪 Test (pull_request) Successful in 2m28s

Details

🚀 Deploy / ʦ🔍 Typecheck & Lint (pull_request) Successful in 1m20s

Details

🚀 Deploy / 🐳 Build (pull_request) Has been skipped

Details

🚀 Deploy / 🚀 Deploy (pull_request) Has been skipped

Details

3c3b162aab

SportIcon renders <img> elements whose onError handler calls setFailed(true),
scheduling state updates asynchronously outside React act() in jsdom. With
multiple icons on the Sports page this caused the synchronous render test to
hit the 5000ms Vitest timeout intermittently.

Mock SportIcon in the test using resolveSportIconUrl() so the mock stays in
sync with the real URL resolution logic if it ever changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>