Vitest browser mode migration

[kentcdodds]

Summary

This PR migrates existing tests to Vitest browser mode, removing @testing-library/{dom,react,user-event} dependencies as requested.

Key changes include:

• Refactored app/routes/_app+/users+/$username.tsx to extract the UI into a new UserProfileView component, which is now tested in browser mode.
• Migrated app/utils/misc.use-double-check.test.tsx to use Vitest browser APIs.
• Updated vitest.config.ts to configure separate test projects for Node.js and browser environments.
• Removed @testing-library dependencies and related imports.
• Applied formatting and resolved linting issues, primarily import ordering.

Test Plan

1. Run npm run test to execute both Node.js and browser tests and ensure all pass.
2. Run npm run format to verify formatting.
3. Run npm run lint to confirm no linting errors or warnings.

Checklist

• Tests updated
• Docs updated

Screenshots

N/A (No UI changes)

---

 

---

Note

Medium Risk
Introduces a new Playwright-backed Vitest browser test project and adjusts CI to install/cache browsers; risk is mostly around test/CI stability and execution time rather than runtime behavior.

Overview
Migrates .test.tsx suites from Testing Library/JSDOM to Vitest browser mode backed by Playwright, including new browser test setup and splitting Vitest into node vs browser projects in vitest.config.ts.

Refactors the /users/:username route to reuse a new UserProfile/UserProfileView component and adds a browser-mode test for that UI, while removing the previous route-level test.

Updates CI to cache and install Playwright browsers for the Vitest job (and adds caching for the Playwright job), removes @testing-library/* deps and related setup/cleanup, and applies import/type-only ordering tweaks across various files.

^{Written by Cursor Bugbot for commit 82d43f0. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[kentcdodds]

@cursoragent make sure our GitHub action installs Playwright and caches it. Right now CI is failing. Why don't you check the CI?

[cursor]

CI status

• Checked run 21536989917: TypeScript and Vitest failed on vitest.config.ts overload errors; Playwright was canceled by the newer run.【2306e8†L1-L33】
• Latest run 21537129708 is in progress after the latest push.【71d8b8†L1-L3】

Summary

• Added Playwright browser caching and install steps to the Vitest and Playwright jobs so CI has browsers available.【F:.github/workflows/deploy.yml†L60-L148】
• Fixed Vitest project typing by moving project names into test.name and keeping coverage at the top level.【F:vitest.config.ts†L7-L42】

Testing

• ✅ npm run typecheck (verify the TypeScript CI failure is resolved).【882f2d†L1-L3】
• ✅ npm run lint (ensure lint stays clean after config changes).【46f536†L1-L3】
• ✅ npm run test -- --run (confirm Vitest node/browser projects pass locally).【de67d6†L1-L20】
• Manual testing not run because changes are CI/config-only and do not affect UI behavior.

 

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Duplicated render helper across browser test files

Medium Severity

The render function, root/container state variables, and afterEach cleanup logic are identically duplicated between the two browser test files. This infrastructure code should be extracted to a shared test utility (e.g., in tests/setup/setup-browser-env.ts or a new tests/browser-test-utils.ts file) and imported where needed.