vitest-dev / vitest-dev/vitest

HMR overlay captures test clicks and cannot be disabled

Open
#8,554 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feat: browser pending triage
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
  1. Run pnpm test:browser - test should pass
  2. Introduce a syntax error in HelloWorld.test.tsx (e.g., remove a quote from the test name)
  3. HMR overlay appears showing the syntax error and stack trace ✓
  4. Fix the syntax error
  5. 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:

Image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.