Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#1,422 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

@swarnim02 arbeitet bereits daran.

Seit 27.11.2025.

  • #1429 von @swarnim02 — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react
Bereich
frontend, testing-qa

Rechercherichtung

Reproduziere das Problem mithilfe von TestMouseEnter.test.tsx und vergleiche es mit TestMouseOver.test.tsx; verfolge anschließend den Einstiegspunkt fireEvent.mouseEnter. Als erledigt gilt, dass das angegebene relatedTarget den onMouseEnter-Handler erreicht und ein Regressionstest besteht, ohne das mouseOver-Verhalten zu beeinträchtigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Versions
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
Vorherrschende Sprache
JavaScript
Sterne
19.7k
Forks
1.2k
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus testing-library/react-testing-library

Alle Issues in testing-library/react-testing-library

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.