feat: support multiple params in event handlers (#203)

Author: Esemesek

docs/API.md

@@ -118,7 +118,7 @@ Get the rendered component JSON representation, e.g. for snapshot testing.
 ## `fireEvent`
 
 ```ts
-fireEvent(element: ReactTestInstance, eventName: string, data?: *): void
+fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>): void
 ```
 
 Fires native-like event with data.
@@ -161,7 +161,7 @@ fireEvent(getByPlaceholder('my placeholder'), 'blur');
 ## `fireEvent[eventName]`
 
 ```ts
-fireEvent[eventName](element: ReactTestInstance, data?: *): void
+fireEvent[eventName](element: ReactTestInstance, ...data: Array<any>): void
 ```
 
 Convenience methods for common events like: `press`, `changeText`, `scroll`.
@@ -187,7 +187,7 @@ const { getByTestId } = render(
 fireEvent.press(getByTestId('button'));
 ```
 
-### `fireEvent.changeText: (element: ReactTestInstance, data?: *) => void`
+### `fireEvent.changeText: (element: ReactTestInstance, ...data: Array<any>) => void`
 
 Invokes `changeText` event handler on the element or parent element in the tree.
 
@@ -207,7 +207,7 @@ const { getByTestId } = render(
 fireEvent.changeText(getByTestId('text-input'), CHANGE_TEXT);
 ```
 
-### `fireEvent.scroll: (element: ReactTestInstance, data?: *) => void`
+### `fireEvent.scroll: (element: ReactTestInstance, ...data: Array<any>) => void`
 
 Invokes `scroll` event handler on the element or parent element in the tree.
 

src/__tests__/fireEvent.test.js

@@ -148,3 +148,15 @@ test('custom component with custom event name', () => {
 
   expect(handlePress).toHaveBeenCalled();
 });
+
+test('event with multiple handler parameters', () => {
+  const handlePress = jest.fn();
+
+  const { getByTestId } = render(
+    <CustomEventComponentWithCustomName handlePress={handlePress} />
+  );
+
+  fireEvent(getByTestId('my-custom-button'), 'handlePress', 'param1', 'param2');
+
+  expect(handlePress).toHaveBeenCalledWith('param1', 'param2');
+});

src/fireEvent.js

@@ -29,8 +29,8 @@ const findEventHandler = (
 const invokeEvent = (
   element: ReactTestInstance,
   eventName: string,
-  data?: any,
-  callsite?: any
+  callsite?: any,
+  ...data: Array<any>
 ) => {
   const handler = findEventHandler(element, eventName, callsite);
 
@@ -41,7 +41,7 @@ const invokeEvent = (
   let returnValue;
 
   act(() => {
-    returnValue = handler(data);
+    returnValue = handler(...data);
   });
 
   return returnValue;
@@ -51,13 +51,17 @@ const toEventHandlerName = (eventName: string) =>
   `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
 
 const pressHandler = (element: ReactTestInstance) =>
-  invokeEvent(element, 'press', undefined, pressHandler);
-const changeTextHandler = (element: ReactTestInstance, data?: *) =>
-  invokeEvent(element, 'changeText', data, changeTextHandler);
-const scrollHandler = (element: ReactTestInstance, data?: *) =>
-  invokeEvent(element, 'scroll', data, scrollHandler);
+  invokeEvent(element, 'press', pressHandler);
+const changeTextHandler = (element: ReactTestInstance, ...data: Array<any>) =>
+  invokeEvent(element, 'changeText', changeTextHandler, ...data);
+const scrollHandler = (element: ReactTestInstance, ...data: Array<any>) =>
+  invokeEvent(element, 'scroll', scrollHandler, ...data);
 
-const fireEvent = invokeEvent;
+const fireEvent = (
+  element: ReactTestInstance,
+  eventName: string,
+  ...data: Array<any>
+) => invokeEvent(element, eventName, fireEvent, ...data);
 
 fireEvent.press = pressHandler;
 fireEvent.changeText = changeTextHandler;

typings/__tests__/index.test.tsx

@@ -174,6 +174,7 @@ tree.unmount();
 // fireEvent API tests
 fireEvent(getByNameString, 'press');
 fireEvent(getByNameString, 'press', 'data');
+fireEvent(getByNameString, 'press', 'param1', 'param2');
 fireEvent.press(getByNameString);
 fireEvent.changeText(getByNameString, 'string');
 fireEvent.scroll(getByNameString, 'eventData');

typings/index.d.ts

@@ -97,13 +97,13 @@ export interface RenderAPI extends GetByAPI, QueryByAPI, A11yAPI {
 export type FireEventFunction = (
   element: ReactTestInstance,
   eventName: string,
-  data?: any
+  ...data: Array<any>
 ) => any;
 
 export type FireEventAPI = FireEventFunction & {
   press: (element: ReactTestInstance) => any;
-  changeText: (element: ReactTestInstance, data?: any) => any;
-  scroll: (element: ReactTestInstance, data?: any) => any;
+  changeText: (element: ReactTestInstance, ...data: Array<any>) => any;
+  scroll: (element: ReactTestInstance, ...data: Array<any>) => any;
 };
 
 export type WaitForElementFunction = <T = any>(