[MOO-1924] Fix react native configs

package.json

@@ -8,7 +8,7 @@
     "colors": "1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.72.7"
+    "react-native": "~0.77.3"
   },
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",

packages/generator-widget/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We upgraded React Native to version 0.77.3 for generated widgets.
+
+-   We updated the required Node.js version to 20 or newer for the generator and generated widget projects.
+
+-   We switched from Enzyme to React Native Testing Library for generated widget tests.
+
 ## [10.15.1] - 2025-05-19
 
 ### Changed

packages/generator-widget/generators/app/templates/packages/__tests__/outputs/package_native.json-js-unit.json

@@ -6,7 +6,7 @@
   "copyright": "Mendix 2023",
   "author": "Jest",
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "license": "Apache-2.0",
   "config": {
@@ -34,10 +34,10 @@
   },
   "resolutions": {
     "react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   },
   "overrides": {
     "react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   }
 }

packages/generator-widget/generators/app/templates/packages/__tests__/outputs/package_native.json-js.json

@@ -6,7 +6,7 @@
   "copyright": "Mendix 2023",
   "author": "Jest",
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "license": "Apache-2.0",
   "config": {
@@ -29,10 +29,10 @@
   },
   "resolutions": {
     "react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   },
   "overrides": {
     "react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   }
 }

packages/generator-widget/generators/app/templates/packages/__tests__/outputs/package_native.json-ts-unit.json

@@ -6,7 +6,7 @@
   "copyright": "Mendix 2023",
   "author": "Jest",
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "license": "Apache-2.0",
   "config": {
@@ -29,7 +29,6 @@
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^10.15.0",
     "@types/big.js": "^6.0.2",
-    "@types/enzyme": "^3.10.8",
     "@types/jest": "^29.0.0"
   },
   "dependencies": {
@@ -38,11 +37,11 @@
   "resolutions": {
     "react": "^18.2.0",
     "@types/react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   },
   "overrides": {
     "react": "^18.2.0",
     "@types/react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   }
 }

packages/generator-widget/generators/app/templates/packages/__tests__/outputs/package_native.json-ts.json

@@ -6,7 +6,7 @@
   "copyright": "Mendix 2023",
   "author": "Jest",
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "license": "Apache-2.0",
   "config": {
@@ -31,11 +31,11 @@
   "resolutions": {
     "react": "^18.2.0",
     "@types/react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   },
   "overrides": {
     "react": "^18.2.0",
     "@types/react": "^18.2.0",
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   }
 }

packages/generator-widget/generators/app/templates/packages/package_native.json.ejs

@@ -6,7 +6,7 @@
   "copyright": <%- JSON.stringify(copyright) %>,
   "author": <%- JSON.stringify(author) %>,
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "license": <%- JSON.stringify(license) %>,
   "config": {
@@ -29,7 +29,6 @@
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^10.15.0"<% if (isLanguageTS) { %>,
     "@types/big.js": "^6.0.2"<% if (hasUnitTests) { %>,
-    "@types/enzyme": "^3.10.8",
     "@types/jest": "^29.0.0"<% } %><% } %>
   },
   "dependencies": {
@@ -38,11 +37,11 @@
   "resolutions": {
     "react": "^18.2.0",<% if (isLanguageTS) { %>
     "@types/react": "^18.2.0",<% } %>
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   },
   "overrides": {
     "react": "^18.2.0",<% if (isLanguageTS) { %>
     "@types/react": "^18.2.0",<% } %>
-    "react-native": "0.72.7"
+    "react-native": "0.77.3"
   }
 }

packages/generator-widget/generators/app/templates/pluggable/native/emptyTemplateJs/src/components/__tests__/HelloWorld.spec.jsx.ejs

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react-native";
 import { Platform } from "react-native";
 
 import { HelloWorld } from "../HelloWorld";
@@ -15,18 +15,18 @@ describe.each(["ios", "android"])("HelloWorld for %s", (os) => {
             name: "Mendix",
             style: []
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
         const helloWorldProps = {
             name: "Mendix",
             style: [{ container: { borderColor: "white" }, label: { color: "black" } }]
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 });

packages/generator-widget/generators/app/templates/pluggable/native/emptyTemplateJsFn/src/components/__tests__/HelloWorld.spec.jsx.ejs

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react-native";
 import { Platform } from "react-native";
 
 import { HelloWorld } from "../HelloWorld";
@@ -15,18 +15,18 @@ describe.each(["ios", "android"])("HelloWorld for %s", (os) => {
             name: "Mendix",
             style: []
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
         const helloWorldProps = {
             name: "Mendix",
             style: [{ container: { borderColor: "white" }, label: { color: "black" } }]
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 });

packages/generator-widget/generators/app/templates/pluggable/native/emptyTemplateTs/src/components/__tests__/HelloWorld.spec.tsx.ejs

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react-native";
 import { Platform } from "react-native";
 
 import { HelloWorld, HelloWorldProps } from "../HelloWorld";
@@ -15,18 +15,18 @@ describe.each(["ios", "android"])("HelloWorld for %s", (os: "ios" | "android") =
             name: "Mendix",
             style: []
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
         const helloWorldProps: HelloWorldProps = {
             name: "Mendix",
             style: [{ container: { borderColor: "white" }, label: { color: "black" } }]
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 });

packages/generator-widget/generators/app/templates/pluggable/native/emptyTemplateTsFn/src/components/__tests__/HelloWorld.spec.tsx.ejs

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react-native";
 import { Platform } from "react-native";
 
 import { HelloWorld, HelloWorldProps } from "../HelloWorld";
@@ -15,18 +15,18 @@ describe.each(["ios", "android"])("HelloWorld for %s", (os: "ios" | "android") =
             name: "Mendix",
             style: []
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
         const helloWorldProps: HelloWorldProps = {
             name: "Mendix",
             style: [{ container: { borderColor: "white" }, label: { color: "black" } }]
         };
-        const helloWorld = shallow(<HelloWorld {...helloWorldProps} />);
+        const component = render(<HelloWorld {...helloWorldProps} />);
 
-        expect(helloWorld).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 });

packages/generator-widget/generators/app/templates/pluggable/native/fullTemplateJs/src/components/Badge.jsx.ejs

@@ -13,7 +13,7 @@ export class Badge extends Component {
 
         return (
             <View style={this.styles.container}>
-                <Touchable style={this.styles.badge} onPress={this.props.onClick} useForeground={true}>
+                <Touchable accessibilityRole={"button"} style={this.styles.badge} onPress={this.props.onClick} useForeground={true}>
                     {this.renderContent()}
                 </Touchable>
             </View>

packages/generator-widget/generators/app/templates/pluggable/native/fullTemplateJs/src/components/__tests__/Badge.spec.jsx.ejs

@@ -1,6 +1,6 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
-import { Platform, TouchableNativeFeedback, TouchableOpacity } from "react-native";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Platform } from "react-native";
 
 import { Badge } from "../Badge";
 
@@ -16,9 +16,9 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        expect(badge).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
@@ -27,9 +27,9 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        expect(badge).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("triggers the onClick action when pressed", () => {
@@ -38,13 +38,10 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        const Touchable = Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;
-
-        expect(badge.children().find(Touchable)).not.toBeNull();
-
-        badge.children().simulate("press");
+        const touchable = component.getByRole("button");
+        fireEvent.press(touchable);
 
         expect(badgeProps.onClick).toHaveBeenCalled();
     });

packages/generator-widget/generators/app/templates/pluggable/native/fullTemplateJsFn/src/components/Badge.jsx.ejs

@@ -22,7 +22,7 @@ export function Badge({ value, style, onClick }) {
 
     return (
         <View style={styles.container}>
-            <Touchable style={styles.badge} onPress={onClick} useForeground={true}>
+            <Touchable accessibilityRole={"button"} style={styles.badge} onPress={onClick} useForeground={true}>
                 {renderContent}
             </Touchable>
         </View>

packages/generator-widget/generators/app/templates/pluggable/native/fullTemplateJsFn/src/components/__tests__/Badge.spec.jsx.ejs

@@ -1,6 +1,6 @@
 import { createElement } from "react";
-import { shallow } from "enzyme";
-import { Platform, TouchableNativeFeedback, TouchableOpacity } from "react-native";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Platform } from "react-native";
 
 import { Badge } from "../Badge";
 
@@ -16,9 +16,9 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        expect(badge).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders the structure correctly with custom style", () => {
@@ -27,9 +27,9 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        expect(badge).toMatchSnapshot();
+        expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("triggers the onClick action when pressed", () => {
@@ -38,13 +38,10 @@ describe.each(["ios", "android"])("Badge for %s", os => {
             onClick: jest.fn(),
             value: "0"
         };
-        const badge = shallow(<Badge {...badgeProps} />);
+        const component = render(<Badge {...badgeProps} />);
 
-        const Touchable = Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;
-
-        expect(badge.children().find(Touchable)).not.toBeNull();
-
-        badge.children().simulate("press");
+        const touchable = component.getByRole("button");
+        fireEvent.press(touchable);
 
         expect(badgeProps.onClick).toHaveBeenCalled();
     });

packages/generator-widget/generators/app/templates/pluggable/native/fullTemplateTs/src/components/Badge.tsx.ejs

@@ -19,7 +19,7 @@ export class Badge extends Component<BadgeProps> {
 
         return (
             <View style={this.styles.container}>
-                <Touchable style={this.styles.badge} onPress={this.props.onClick} useForeground={true}>
+                <Touchable accessibilityRole={"button"} style={this.styles.badge} onPress={this.props.onClick} useForeground={true}>
                     {this.renderContent()}
                 </Touchable>
             </View>