testing-library / testing-library/react-testing-library
`fireEvent.mouseEnter` does not forward `relatedTarget` (relatedTarget is the window instead)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
Description
Versions
@testing-library/reactversion:16.3.0- Testing Framework and version:
vitest@3.2.4 - DOM Environment:
jsdom@27.0.1
Relevant code or config:
Test component using onMouseEnter:
// TestMouseEnter.tsx
import { type MouseEvent } from 'react';
export function Test() {
const handleMouseEnter = (e: MouseEvent) => {
console.log('mouseEnter', e.relatedTarget);
};
return (
<>
<div onMouseEnter={handleMouseEnter}>
Hello
</div>
</>
);
}
Unit test for dummy component using onMouseEnter:
// TestMouseEnter.test.tsx
import { describe, expect, it, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Test } from './test';
describe('Test', () => {
it('handles mouse enter event', () => {
const consoleSpy = vi.spyOn(console, 'log');
render(<Test />);
const element = screen.getByText('Hello');
const mockRelatedTarget = document.createElement('div');
fireEvent.mouseEnter(element, {
relatedTarget: mockRelatedTarget,
});
expect(consoleSpy).not.toHaveBeenCalledWith('mouseEnter', window);
// FAILS: Compared values have no visual difference
expect(consoleSpy).toHaveBeenCalledWith('mouseEnter', mockRelatedTarget);
// FAILS: 1st log call: ["mouseEnter", [Object]]
});
});
The same dummy component but this time using onMouseOver:
// TestMouseOver.tsx
import { type MouseEvent } from 'react';
export function Test() {
const handleMouseOver = (e: MouseEvent) => {
console.log('mouseOver', e.relatedTarget);
};
return (
<>
<div onMouseOver={handleMouseOver}>
Hello
</div>
</>
);
}
Unit test for dummy component using onMouseOver:
// TestMouseOver.test.tsx
import { describe, expect, it, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Test } from './test';
describe('Test', () => {
it('handles mouse over event', () => {
const consoleSpy = vi.spyOn(console, 'log');
render(<Test />);
const element = screen.getByText('Hello');
const mockRelatedTarget = document.createElement('div');
fireEvent.mouseOver(element, {
relatedTarget: mockRelatedTarget,
});
expect(consoleSpy).not.toHaveBeenCalledWith('mouseOver', window);
// OK
expect(consoleSpy).toHaveBeenCalledWith('mouseOver', mockRelatedTarget);
// OK
});
});
What you did:
I am using fireEvent.mouseEnter and want to specify a specific element as relatedTarget.
What happened:
In the event handler, e.relatedTarget is a reference to window instead of the specified element.
mouseOver does not have this issue.
Problem description:
It should be possible to specify the relatedTarget for mouseEnter events as the same works for mouseOver events.
StackBlitz Link
https://stackblitz.com/edit/rtl-template-mqbjsare?file=src%2Fcomponents%2FTestMouseEnter.test.tsx
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
Reproduce the issue using TestMouseEnter.test.tsx and compare it with TestMouseOver.test.tsx, then trace the fireEvent.mouseEnter entry point. Done means the specified relatedTarget reaches the onMouseEnter handler and a regression test passes without breaking mouseOver behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100