Skip to content

Commit ff95b7a

Browse files
committed
feat: Allow null type for node on fireEvent and its shortcuts
A common pattern in some testing code is: ```js const btn = document.getElementById('my-button') fireEvent.click(btn) ``` However, `document.getElementById()` may return null and then TypeScript will report an error: ``` error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Document | Node | Element | Window'. ``` To resolve the TypeScript error, user can assert or check the returned value wit something like: ```js const btn = document.getElementById('my-button') if (!btn) { throw new Error("Unable to find 'my-button') } fireEvent.click(btn) ``` But dom-testing-library is already doing this check, so let fireEvent accept null as a convenience to call sites. The error already reported by dom-testing-library is: ``` Unable to fire a "click" event - please provide a DOM element. ```
1 parent 7917358 commit ff95b7a

File tree

3 files changed

+20
-4
lines changed

3 files changed

+20
-4
lines changed

src/__tests__/events.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,18 @@ test('throws a useful error message when firing events on non-existent nodes (sh
420420
)
421421
})
422422

423+
test('throws a useful error message when firing events on null', () => {
424+
expect(() => fireEvent(null, new MouseEvent('click'))).toThrow(
425+
'Unable to fire a "click" event - please provide a DOM element.',
426+
)
427+
})
428+
429+
test('throws a useful error message when firing events on null (shortcut)', () => {
430+
expect(() => fireEvent.click(null)).toThrow(
431+
'Unable to fire a "click" event - please provide a DOM element.',
432+
)
433+
})
434+
423435
test('throws a useful error message when firing non-events', () => {
424436
expect(() => fireEvent(document.createElement('div'), undefined)).toThrow(
425437
'Unable to fire an event - please provide an event object.',

types/__tests__/type-tests.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,10 @@ export function eventTest() {
213213
// Custom event
214214
const customEvent = createEvent('customEvent', element)
215215
fireEvent(element, customEvent)
216+
217+
// null returned by Document.getElementById()
218+
const button = document.getElementById('my-button')
219+
fireEvent.click(button)
216220
}
217221

218222
export async function testWaitFors() {

types/events.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,24 +90,24 @@ export type EventType =
9090
| 'online'
9191

9292
export type FireFunction = (
93-
element: Document | Element | Window | Node,
93+
element: Document | Element | Window | Node | null,
9494
event: Event,
9595
) => boolean
9696
export type FireObject = {
9797
[K in EventType]: (
98-
element: Document | Element | Window | Node,
98+
element: Document | Element | Window | Node | null,
9999
options?: {},
100100
) => boolean
101101
}
102102
export type CreateFunction = (
103103
eventName: string,
104-
node: Document | Element | Window | Node,
104+
node: Document | Element | Window | Node | null,
105105
init?: {},
106106
options?: {EventType?: string; defaultInit?: {}},
107107
) => Event
108108
export type CreateObject = {
109109
[K in EventType]: (
110-
element: Document | Element | Window | Node,
110+
element: Document | Element | Window | Node | null,
111111
options?: {},
112112
) => Event
113113
}

0 commit comments

Comments
 (0)