Fix React.act infrastructure issue in jsdom component tests (React 19 + @testing-library/react)

[brendanlong]

Problem

All component tests (run via pnpm test:component / vitest.component.config.ts) are currently failing with:

TypeError: React.act is not a function

This affects src/components/**/*.test.tsx, src/lib/**/*.test.tsx, and any React hook tests in src/hooks/**/*.test.ts.

Root Cause

React 19 moved act to the react package directly, away from react-dom/test-utils. The @testing-library/react@16.3.2 tries to use React.act via react-dom/test-utils, which loads the production bundle of React where act is not exported.

Impact

• All 92 component tests are failing
• Hook tests that use renderHook from @testing-library/react also fail
• src/hooks/useVoiceRecording.test.ts is currently marked .skip due to this issue

Possible Fixes

1. Upgrade @testing-library/react to a version that fully supports React 19
2. Configure vitest to always use React's development bundle in test environments
3. Add @testing-library/react React 19 compatibility configuration

— Claude

[m13v]

we hit this exact React 19 + testing-library compatibility issue recently. the root cause is that @testing-library/react@16.x imports act from react-dom/test-utils, which React 19 deprecated. the cleanest fix is upgrading to @testing-library/react@16.3.0+ which has React 19 support, but you also need to make sure vitest is loading the development bundle of React (not production) since act is only exported from the dev bundle.

in vitest.config.ts, add resolve.conditions: ['development'] to force the dev bundle. that alone fixed 80% of our failing tests. for the remaining ones where renderHook was still broken, we had to also add a globals: true config so that act is available globally. the useVoiceRecording test being skipped is likely because renderHook needs the same act fix. once you get the base config right all 92 tests should come back without changing individual test files.

[m13v]

for anyone dealing with testing infrastructure issues like this at scale, we've been building an open source test automation framework that handles the browser and test runtime setup automatically. the browser lifecycle management: https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/browser.ts. generates standard Playwright tests so it works alongside your existing vitest component tests.