Skip to content

fireEvent.mouseEnter does not forward relatedTarget (relatedTarget is the window instead) #1422

@TH-VF

Description

@TH-VF

Versions

  • @testing-library/react version: 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.

Image Image

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

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions