{
e.persist();
enterEvents.push(e);
}}
/>,
);
});
const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;
await act(() => {
node.dispatchEvent(
new MouseEvent('mouseover', {
bubbles: true,
cancelable: true,
relatedTarget: null,
}),
);
});
expect(enterEvents.length).toBe(1);
expect(enterEvents[0].target).toBe(node);
expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);
});
// Regression test for https://github.com/facebook/react/issues/10906.
it('should find the common parent after updates', async () => {
let parentEnterCalls = 0;
let childEnterCalls = 0;
let parent = null;
class Parent extends React.Component {
render() {
return (
parentEnterCalls++}
ref={node => (parent = node)}>
{this.props.showChild && (
childEnterCalls++} />
)}
);
}
}
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
);
});
await act(() => {
root.render(
);
});
// Enter from parent into the child.
await act(() => {
parent.dispatchEvent(
new MouseEvent('mouseout', {
bubbles: true,
cancelable: true,
relatedTarget: parent.firstChild,
}),
);
});
// Entering a child should fire on the child, not on the parent.
expect(childEnterCalls).toBe(1);
expect(parentEnterCalls).toBe(0);
});
// Test for https://github.com/facebook/react/issues/16763.
// @gate !disableLegacyMode
it('should call mouseEnter once from sibling rendered inside a rendered component in legacy roots', async () => {
const mockFn = jest.fn();
class Parent extends React.Component {
constructor(props) {
super(props);
this.parentEl = React.createRef();
}
componentDidMount() {
ReactDOM.render(
, this.parentEl.current);
}
render() {
return
;
}
}
class MouseEnterDetect extends React.Component {
constructor(props) {
super(props);
this.firstEl = React.createRef();
this.siblingEl = React.createRef();
}
componentDidMount() {
this.siblingEl.current.dispatchEvent(
new MouseEvent('mouseout', {
bubbles: true,
cancelable: true,
relatedTarget: this.firstEl.current,
}),
);
}
render() {
return (
);
}
}
await act(() => {
ReactDOM.render(
, container);
});
expect(mockFn.mock.calls.length).toBe(1);
});
// @gate !disableLegacyMode
it('should call mouseEnter when pressing a non tracked React node in legacy root', async () => {
const mockFn = jest.fn();
class Parent extends React.Component {
constructor(props) {
super(props);
this.parentEl = React.createRef();
}
componentDidMount() {
ReactDOM.render(
, this.parentEl.current);
}
render() {
return
;
}
}
class MouseEnterDetect extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
this.siblingEl = React.createRef();
}
componentDidMount() {
const attachedNode = document.createElement('div');
this.divRef.current.appendChild(attachedNode);
attachedNode.dispatchEvent(
new MouseEvent('mouseout', {
bubbles: true,
cancelable: true,
relatedTarget: this.siblingEl.current,
}),
);
}
render() {
return (
);
}
}
await act(() => {
ReactDOM.render(
, container);
});
expect(mockFn.mock.calls.length).toBe(1);
});
it('should work with portals outside of the root that has onMouseLeave', async () => {
const divRef = React.createRef();
const onMouseLeave = jest.fn();
function Component() {
return (
{ReactDOM.createPortal(
, document.body)}
);
}
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
);
});
// Leave from the portal div
await act(() => {
divRef.current.dispatchEvent(
new MouseEvent('mouseout', {
bubbles: true,
cancelable: true,
relatedTarget: document.body,
}),
);
});
expect(onMouseLeave).toHaveBeenCalledTimes(1);
});
it('should work with portals that have onMouseEnter outside of the root', async () => {
const divRef = React.createRef();
const otherDivRef = React.createRef();
const onMouseEnter = jest.fn();
function Component() {
return (
{ReactDOM.createPortal(
,
document.body,
)}
);
}
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
);
});
// Leave from the portal div
divRef.current.dispatchEvent(
new MouseEvent('mouseout', {
bubbles: true,
cancelable: true,
relatedTarget: otherDivRef.current,
}),
);
expect(onMouseEnter).toHaveBeenCalledTimes(1);
});
});