vitest-dev / vitest-dev/vitest

Hovering over tooltip with vitest browser mode

Open
#9,559 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
TypeScript
Stars
17.1k
Forks
2k
Avg merge
1d 21h
Merged PRs (30d)
92

Description

Describe the bug

userEvent.hover and tooltip behavior

Hi! I ran into an issue while testing a component with a tooltip triggered on hover.

When using userEvent.hover(trigger), the tooltip never appears. After some investigation, it seems that although Playwright simulates hover events, there’s no initial pointer state, so the hover transition never actually occurs.

The only ways I’ve been able to make this work are:

Clicking document.body before hovering (to establish pointer state), or

Using Playwright’s page.mouse.move, which isn’t available when running tests in browser mode.

My questions:

Is this behavior expected for userEvent.hover?

Is clicking document.body an acceptable workaround, or is there a recommended pattern for hover-based UI like tooltips?

Can calling render method set the initial state so the click on document.body is not needed?

Thanks!

Reproduction

https://stackblitz.com/~/github.com/thaynarbo/hover-issue

System Info
System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M4
    Memory: 78.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.0 - /Users/thaynar.lima/.nvm/versions/node/v20.19.0/bin/node
    Yarn: 1.22.22 - /Users/thaynar.lima/.nvm/versions/node/v20.19.0/bin/yarn
    npm: 11.7.0 - /Users/thaynar.lima/.nvm/versions/node/v20.19.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 144.0.7559.110
    Safari: 18.3
  npmPackages:
    @vitejs/plugin-react: ^5.1.1 => 5.1.2 
    @vitest/browser-playwright: ^4.0.18 => 4.0.18 
    playwright: ^1.58.1 => 1.58.1 
    vite: ^7.2.4 => 7.3.1 
    vitest: ^4.0.18 => 4.0.18 
    vitest-browser-react: ^2.0.5 => 2.0.5
Used Package Manager

npm

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 with the linked StackBlitz reproduction and trace how userEvent.hover behaves in Vitest browser mode with Playwright. Confirm whether the tooltip can appear without clicking document.body or using page.mouse.move; done means the hover-triggered tooltip works through the supported browser-mode interaction path.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, typescript
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.