Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#1,422 0 comments 0 reactions 0 assignees View on GitHub

@swarnim02 is already working on this.

Since Nov 27, 2025.

  • #1429 by @swarnim02 — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript, react
Domain
frontend, testing-qa

Research direction

Reproduce the issue using TestMouseEnter.test.tsx and compare it with TestMouseOver.test.tsx, then trace the fireEvent.mouseEnter entry point. Done means the specified relatedTarget reaches the onMouseEnter handler and a regression test passes without breaking mouseOver behavior.

Written by the indexing model from the issue text.

Description

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
Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from testing-library/react-testing-library

All issues in testing-library/react-testing-library

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.