Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,422 0 comentarios 0 reacciones 0 asignados Ver en GitHub

@swarnim02 ya está trabajando en esto.

Desde el 27/11/2025.

  • #1429 de @swarnim02 — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
frontend, testing-qa

Línea de trabajo

Reproduce el problema usando TestMouseEnter.test.tsx y compáralo con TestMouseOver.test.tsx; después, sigue el punto de entrada fireEvent.mouseEnter. Se considera completado cuando el relatedTarget especificado llega al controlador onMouseEnter y una prueba de regresión pasa sin romper el comportamiento de mouseOver.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
19.7k
Forks
1.2k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de testing-library/react-testing-library

Todos los issues de testing-library/react-testing-library

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.