- 
                Notifications
    You must be signed in to change notification settings 
- Fork 1.1k
Open
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

Metadata
Metadata
Assignees
Labels
No labels