Merge branch 'master' into moo/MOO-1847-upgrade-react-native-fast-image

Author: YogendraShelke

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();
     });
 });