vitest-dev / vitest-dev/vitest
HMR overlay captures test clicks and cannot be disabled
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17.1k
- Forks
- 2k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 94
Description
Describe the bug
When using Vitest browser mode, tests re-run before the error HMR overlay is removed. This causes test interactions (like clicks) to be intercepted by the overlay, resulting in unintended behaviour such as opening editor links from the stack trace.
Additionally, the server.hmr.overlay: false configuration option in vitest.browser.config.ts is ignored and does not disable the overlay as expected.
Reproduction
Checkout vitest-hmr-overlay-troubleshoot.
git clone https://github.com/steedems/vitest-hmr-overlay-troubleshoot.git
- Run
pnpm test:browser- test should pass - Introduce a syntax error in
HelloWorld.test.tsx(e.g., remove a quote from the test name) - HMR overlay appears showing the syntax error and stack trace ✓
- Fix the syntax error
- The test re-runs before the HMR overlay is removed. Therefore, clicks fired by the test itself underneath the overlay are captured by the overlay and links of the stack trace are opened in the editor ✗
Additional issue:
- Setting
server.hmr.overlay: falsein vitest.browser.config.ts has no effect. The overlay is always shown.
System Info
System:
OS: macOS 15.6.1
CPU: (10) arm64 Apple M2 Pro
Memory: 91.61 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
pnpm: 9.12.1 - ~/Library/pnpm/pnpm
Watchman: 2024.09.23.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 139.0.7258.157
Safari: 18.6
npmPackages:
@vitejs/plugin-react: ^5.0.0 => 5.0.2
@vitest/browser: ^3.2.4 => 3.2.4
playwright: ^1.55.0 => 1.55.0
vite: ^7.1.2 => 7.1.5
vitest: ^3.2.4 => 3.2.4
vitest-browser-react: ^1.0.1 => 1.0.1
Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running pnpm test:browser in the vitest-hmr-overlay-troubleshoot reproduction, then inspect vitest.browser.config.ts and HelloWorld.test.tsx while reproducing the syntax-error and fix sequence. Trace the browser-mode HMR overlay behavior and configuration handling; done means the overlay no longer intercepts rerun clicks and server.hmr.overlay: false disables it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, typescript, vite
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100