Skip to content

Commit c5a7206

Browse files
authored
fix: make fireEvent mouseEnter/mouseLeave work with addEventListener (#588)
* fix: make fireEvent mouseEnter/mouseLeave work with addEventListener (#577) * Add tests for native events * fix: make fireEvent select work with addEventListener. Improve organization of native events test. Closes #577
1 parent 24fc9b0 commit c5a7206

File tree

2 files changed

+47
-2
lines changed

2 files changed

+47
-2
lines changed

src/__tests__/events.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,41 @@ eventTypes.forEach(({type, events, elementType, init}) => {
153153
})
154154
})
155155

156+
eventTypes.forEach(({type, events, elementType, init}) => {
157+
describe(`Native ${type} Events`, () => {
158+
events.forEach(eventName => {
159+
let nativeEventName = eventName.toLowerCase()
160+
161+
// The doubleClick synthetic event maps to the dblclick native event
162+
if (nativeEventName === 'doubleclick') {
163+
nativeEventName = 'dblclick'
164+
}
165+
166+
it(`triggers native ${nativeEventName}`, () => {
167+
const ref = React.createRef()
168+
const spy = jest.fn()
169+
const Element = elementType
170+
171+
const NativeEventElement = () => {
172+
React.useEffect(() => {
173+
const element = ref.current
174+
element.addEventListener(nativeEventName, spy)
175+
return () => {
176+
element.removeEventListener(nativeEventName, spy)
177+
}
178+
})
179+
return <Element ref={ref} />
180+
}
181+
182+
render(<NativeEventElement />)
183+
184+
fireEvent[eventName](ref.current, init)
185+
expect(spy).toHaveBeenCalledTimes(1)
186+
})
187+
})
188+
})
189+
})
190+
156191
test('onChange works', () => {
157192
const handleChange = jest.fn()
158193
const {

src/pure.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,20 @@ Object.keys(dtlFireEvent).forEach(key => {
128128
// React event system tracks native mouseOver/mouseOut events for
129129
// running onMouseEnter/onMouseLeave handlers
130130
// @link https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/events/EnterLeaveEventPlugin.js#L24-L31
131-
fireEvent.mouseEnter = fireEvent.mouseOver
132-
fireEvent.mouseLeave = fireEvent.mouseOut
131+
const mouseEnter = fireEvent.mouseEnter
132+
const mouseLeave = fireEvent.mouseLeave
133+
fireEvent.mouseEnter = (...args) => {
134+
mouseEnter(...args)
135+
return fireEvent.mouseOver(...args)
136+
}
137+
fireEvent.mouseLeave = (...args) => {
138+
mouseLeave(...args)
139+
return fireEvent.mouseOut(...args)
140+
}
133141

142+
const select = fireEvent.select
134143
fireEvent.select = (node, init) => {
144+
select(node, init)
135145
// React tracks this event only on focused inputs
136146
node.focus()
137147

0 commit comments

Comments
 (0)