Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#1,422 0 comentários 0 reações 0 responsáveis Ver no GitHub

@swarnim02 já está trabalhando nisso.

Desde 27/11/2025.

  • #1429 de @swarnim02 — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
55/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
frontend, testing-qa

Direção de pesquisa

Reproduza o problema usando TestMouseEnter.test.tsx e compare-o com TestMouseOver.test.tsx; em seguida, rastreie o ponto de entrada fireEvent.mouseEnter. Considera-se concluído quando o relatedTarget especificado chega ao handler onMouseEnter e um teste de regressão passa sem quebrar o comportamento de mouseOver.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
JavaScript
Estrelas
19.7k
Forks
1.2k
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de testing-library/react-testing-library

Todas as issues de testing-library/react-testing-library

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.