chore: use recommended userEvent instead of fireEvent; update dependencies

Author: vadymv-mendix

packages/pluggableWidgets/feedback-native/package.json

@@ -20,14 +20,14 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "querystringify": "^2.1.1",
-    "react-native-dialog": "9.2.2",
+    "querystringify": "^2.2.0",
+    "react-native-dialog": "9.3.0",
     "react-native-view-shot": "4.0.3"
   },
   "devDependencies": {
     "@mendix/piw-utils-internal": "1.0.0",
     "@mendix/pluggable-widgets-tools": "*",
-    "@types/querystringify": "^2.0.0",
-    "@types/react-native-dialog": "^5.5.0"
+    "@types/querystringify": "^2.0.2",
+    "@types/react-native-dialog": "^5.6.3"
   }
 }

packages/pluggableWidgets/feedback-native/src/Feedback.tsx

@@ -63,10 +63,10 @@ export class Feedback extends Component<FeedbackProps<FeedbackStyle>, State> {
         supportedOrientations: ["portrait", "landscape"]
     };
 
-    componentDidMount() {
+    UNSAFE_componentDidMount() {
         Dimensions.addEventListener("change", this.updateDeviceHeight);
     }
-    componentDidUpdate(_: Readonly<FeedbackProps<FeedbackStyle>>, prevState: Readonly<State>) {
+    UNSAFE_componentDidUpdate(_: Readonly<FeedbackProps<FeedbackStyle>>, prevState: Readonly<State>) {
         if (
             ["todo", "inprogress"].includes(prevState.status) &&
             this.state.status === "closingDialog" &&

packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx

@@ -1,5 +1,5 @@
 import { FeedbackStyle } from "../ui/styles";
-import { fireEvent, render, waitFor, cleanup } from "@testing-library/react-native";
+import { render, cleanup, userEvent } from "@testing-library/react-native";
 import { createElement } from "react";
 import { FeedbackProps } from "../../typings/FeedbackProps";
 import { Feedback } from "../Feedback";
@@ -52,12 +52,15 @@ describe("Feedback", () => {
 
     it("should call the api when sending", async () => {
         const feedbackMsg = "unittest";
+        const user = userEvent.setup();
         const component = render(<Feedback {...defaultProps} />);
-        fireEvent.press(component.getByTestId("feedback-test$button"));
-        await waitFor(() => {
-            fireEvent.changeText(component.getByTestId("feedback-test$input"), feedbackMsg);
-        });
-        fireEvent.press(component.getByTestId("feedback-test$send"));
+
+        await user.press(component.getByTestId("feedback-test$button"));
+
+        await user.type(component.getByTestId("feedback-test$input"), feedbackMsg);
+
+        await user.press(component.getByTestId("feedback-test$send"));
+
         expect(fetch).toHaveBeenCalledWith(
             "https://feedback-api.mendix.com/rest/v3/feedbackapi/projects/sprintr-app-id/issues",
             {