fireEvent.mouseEnter does not forward relatedTarget (relatedTarget is the window instead) #1422
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
