diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index 15b7d8e..921c0b6 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -125,15 +125,18 @@ const eventTypes = [
type: 'Transition',
events: ['transitionEnd'],
elementType: 'div'
+ },
+ {
+ type: 'Pointer',
+ events: ['pointerEnter', 'pointerLeave'],
+ elementType: 'div'
}
]
-eventTypes.forEach(({
- type, events, elementType, init
-}) => {
+eventTypes.forEach(({ type, events, elementType, init }) => {
describe(`${type} Events`, () => {
events.forEach((eventName) => {
- const eventProp = `on${eventName.toLowerCase()}`
+ const eventProp = `on${eventName[0].toUpperCase() + eventName.slice(1)}`
it(`triggers ${eventProp}`, () => {
const ref = createRef()
@@ -157,9 +160,9 @@ eventTypes.forEach(({
test('onInput works', () => {
const handler = jest.fn()
- const { container: { firstChild: input } } = render(
- ()
- )
+ const {
+ container: { firstChild: input }
+ } = render()
expect(fireEvent.input(input, { target: { value: 'a' } })).toBe(true)
@@ -169,9 +172,9 @@ test('onInput works', () => {
test('calling `fireEvent` directly works too', () => {
const handler = jest.fn()
- const { container: { firstChild: button } } = render(
- ()
- )
+ const {
+ container: { firstChild: button }
+ } = render()
expect(fireEvent(
button,
diff --git a/src/fire-event.js b/src/fire-event.js
new file mode 100644
index 0000000..69d6a66
--- /dev/null
+++ b/src/fire-event.js
@@ -0,0 +1,18 @@
+import { fireEvent as domFireEvent, createEvent } from '@testing-library/dom'
+
+// Similar to RTL we make are own fireEvent helper that just calls DTL's fireEvent with that
+// we can that any specific behaviors to the helpers we need
+export const fireEvent = (...args) => domFireEvent(...args)
+
+Object.keys(domFireEvent).forEach((key) => {
+ fireEvent[key] = (elem) => {
+ // Preact registers event-listeners in lower-case, so onPointerStart becomes pointerStart
+ // here we will copy this behavior, when we fire an element we will fire it in lowercase so
+ // we hit the Preact listeners.
+ const eventName = `on${key.toLowerCase()}`
+ const isInElem = eventName in elem
+ return isInElem
+ ? domFireEvent[key](elem)
+ : domFireEvent(elem, createEvent(key[0].toUpperCase() + key.slice(1), elem))
+ }
+})
diff --git a/src/pure.js b/src/pure.js
index cd7ae73..8f594aa 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -1,6 +1,7 @@
import { getQueriesForElement, prettyDOM, configure as configureDTL } from '@testing-library/dom'
import { h, hydrate as preactHydrate, render as preactRender } from 'preact'
-import { act, setupRerender } from 'preact/test-utils'
+import { act } from 'preact/test-utils'
+import { fireEvent } from './fire-event'
configureDTL({
asyncWrapper: async cb => {
@@ -106,5 +107,7 @@ function cleanup () {
mountedContainers.forEach(cleanupAtContainer)
}
+// eslint-disable-next-line import/export
export * from '@testing-library/dom'
-export { render, cleanup, act }
+// eslint-disable-next-line import/export
+export { render, cleanup, act, fireEvent }