-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Description
Versions
@testing-library/reactversion: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.
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

Metadata
Metadata
Assignees
Labels
No labels