chore: minor adjustments

samples/weather-forecast/dev/bootstrap.ts

@@ -18,6 +18,7 @@ import { baseAttributes } from "./constants";
 import Config from "./config";
 import ReactDOM from "react-dom";
 import React from "react";
+import { createRoot } from "react-dom/client";
 
 /**
  * Simulated hosting class to run the widget
@@ -72,11 +73,13 @@ window.defineBlock = function (externalBlockDefinition) {
     WidgetApiMock,
   );
 
-  ReactDOM.render(
+  const container = document.getElementById("config");
+  const root = createRoot(container!);
+  root.render(
     React.createElement(Config, {
       blockDefinition: externalBlockDefinition.blockDefinition,
-    }),
-    document.getElementById("config"),
+    })
   );
+
   window.customElements.define(customElementName, CustomElementClass);
 };

samples/weather-forecast/jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   moduleNameMapper: {
     'icons/(.*)\.svg$': '<rootDir>/__mocks__/lazySvgMock.js',
     '\\.svg$': '<rootDir>/__mocks__/fileMock.js',
-    '^axios$': 'axios/dist/node/axios.cjs'
+    '^axios$': '<rootDir>/node_modules/axios/dist/node/axios.cjs'
   },
   testEnvironment: 'jsdom',
 };

samples/weather-forecast/package.json

@@ -22,10 +22,9 @@
     "axios": "1.7.7",
     "date-fns": "^2.23.0",
     "dayjs": "1.11.13",
-    "openweather-apis": "4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-cool-dimensions": "^2.0.7",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-query": "3.39.3",
     "regenerator-runtime": "0.14.1"
   },
@@ -47,17 +46,17 @@
     "@rjsf/utils": "5.22.4",
     "@rjsf/validator-ajv8": "5.22.4",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/dom": "8.11.1",
-    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/jest": "^29.5.14",
     "@types/json-schema": "^7.0.15",
     "@types/node": "16.11.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@types/webpack": "5.28.5",
     "@types/webpack-dev-server": "4.7.2",
     "@typescript-eslint/eslint-plugin": "5.4.0",
@@ -71,23 +70,19 @@
     "eslint-config-prettier": "8.3.0",
     "file-loader": "^6.2.0",
     "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-json-schema": "^5.0.0",
     "js-base64": "3.7.7",
     "minimal-polyfills": "2.2.3",
     "prettier": "2.3.2",
     "react-svg-loader": "^3.0.0",
     "ts-loader": "^9.5.1",
     "ts-node": "10.9.2",
-    "typescript": "4.5.2",
+    "typescript": "^5.7.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^6.0.1"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "jest-matchmedia-mock"
-    ]
   }
 }

samples/weather-forecast/src/index.test.tsx

@@ -13,6 +13,7 @@
 
 import { screen } from "@testing-library/dom";
 import axios, { AxiosRequestConfig } from "axios";
+import "@testing-library/jest-dom";
 
 import "../dev/bootstrap";
 

samples/weather-forecast/src/index.tsx

@@ -12,7 +12,6 @@
  */
 
 import React from "react";
-import ReactDOM from "react-dom";
 
 import {
   BlockFactory,
@@ -24,6 +23,7 @@ import { WeatherForecastProps, WeatherForecast } from "./weather-forecast";
 import { configurationSchema, uiSchema } from "./configuration-schema";
 import pkg from "../package.json";
 import icon from "../resources/weather-forecast.svg";
+import { createRoot } from "react-dom/client";
 
 /**
  * Define wich attributes are handled by the widget. This should be also reflected in configuration schema
@@ -58,7 +58,9 @@ const factory: BlockFactory = (BaseBlockClass, _widgetApi) => {
     }
 
     public renderBlock(container: HTMLElement): void {
-      ReactDOM.render(<WeatherForecast {...this.props} />, container);
+      createRoot(container).render(
+        <WeatherForecast {...this.props} />
+      );
     }
 
     /**