Upgrade single-spa-welcome to React 19 (#432)

* Upgrade single-spa-welcome to React 19

* Fix tests

* Fix tests

* Try to fix tests

* Upgrade pnpm

* Try switching to native fetch

* Changeset

* Fix tests

* Fix lint

.changeset/blue-rocks-bathe.md

@@ -0,0 +1,5 @@
+---
+"single-spa-welcome": patch
+---
+
+Upgrade to react 19

.changeset/gentle-lizards-cough.md

@@ -0,0 +1,5 @@
+---
+"generator-single-spa": patch
+---
+
+Fix typescript error in no-layout root configs

.changeset/modern-peas-destroy.md

@@ -0,0 +1,5 @@
+---
+"generator-single-spa": patch
+---
+
+Upgrade @testing-library/react and @testing-library/jest-dom in react microfrontends

.changeset/soft-jobs-sneeze.md

@@ -0,0 +1,5 @@
+---
+"single-spa-web-server-utils": major
+---
+
+Switch to native fetch rather than node-fetch

.github/workflows/build-and-test.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: "22"
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.4.0
+          version: 9.15.0
       - run: git checkout main && git checkout $GITHUB_SHA
       - run: pnpm install --frozen-lockfile
       - run: pnpm changeset status

packages/generator-single-spa/jest.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('jest').Config} */
+const config = {
+  testPathIgnorePatterns: ["templates"],
+};
+
+export default config;

packages/generator-single-spa/package.json

@@ -14,19 +14,17 @@
   "main": "src/generator-single-spa.js",
   "license": "MIT",
   "dependencies": {
-    "chalk": "^4.1.2",
     "command-exists": "^1.2.9",
-    "ejs": "^3.1.9",
+    "ejs": "^3.1.10",
     "lodash": "^4.17.21",
     "yeoman-generator": "^5.10.0"
   },
   "devDependencies": {
-    "jest": "^27.5.1",
-    "yeoman-test": "^6.2.0"
-  },
-  "jest": {
-    "testPathIgnorePatterns": [
-      "templates"
-    ]
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "babel-jest": "^29.7.0",
+    "chalk": "^4.1.2",
+    "jest": "^29.7.0",
+    "yeoman-test": "^6.3.0"
   }
 }

packages/generator-single-spa/src/react/templates/react.package.json

@@ -21,8 +21,8 @@
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/runtime": "^7.23.3",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "babel-jest": "^27.5.1",
     "concurrently": "^6.2.1",
     "cross-env": "^7.0.3",

packages/generator-single-spa/src/root-config/templates/src/root-config.ejs

@@ -3,8 +3,8 @@ import { registerApplication, start<% if (typescript) {%>, LifeCycles<% }%> } fr
 registerApplication({
   name: "@single-spa/welcome",
   app: () =>
-    import<% if (typescript) {%><LifeCycles><% } %>(
-      /* webpackIgnore: true */
+    import(
+      /* webpackIgnore: true */ // @ts-ignore-next
       "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
     ),
   activeWhen: ["/"],
@@ -13,8 +13,8 @@ registerApplication({
 // registerApplication({
 //   name: "@<%- orgName %>/navbar",
 //   app: () =>
-//     import<% if (typescript) {%><LifeCycles><% } %>(
-//       /* webpackIgnore: true */
+//     import(
+//       /* webpackIgnore: true */ // @ts-ignore-next
 //       "@<%- orgName %>/navbar"
 //     ),
 //   activeWhen: ["/"],

packages/single-spa-web-server-utils/jest.config.js

@@ -1,7 +1,6 @@
 /**  @type {import('@jest/types').Config.ProjectConfig} */
 const config = {
   moduleNameMapper: {
-    "node-fetch": "<rootDir>/__mocks__/node-fetch.js",
     "import-map-overrides": "<rootDir>/__mocks__/import-map-overrides.js",
   },
   clearMocks: true,

packages/single-spa-web-server-utils/lib/import-map-poller.js

@@ -1,4 +1,3 @@
-import fetch from "node-fetch";
 import _ from "lodash";
 import { applyOverrides, getOverridesFromCookies } from "import-map-overrides";
 

packages/single-spa-web-server-utils/lib/import-map-poller.test.js

@@ -3,9 +3,14 @@ import {
   clearAllIntervals,
   getImportMaps,
 } from "./import-map-poller.js";
-import fetch from "node-fetch";
 import { jest } from "@jest/globals";
 
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({ test: 100 }),
+  })
+);
+
 const successResponse = Promise.resolve({
   ok: true,
   headers: {

packages/single-spa-welcome/eslint.config.mjs

@@ -0,0 +1,22 @@
+import babelParser from "@babel/eslint-parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends("react-important-stuff", "plugin:prettier/recommended"),
+  {
+    languageOptions: {
+      parser: babelParser,
+    },
+  },
+];

packages/single-spa-welcome/jest.config.js

@@ -7,5 +7,4 @@ module.exports = {
   moduleNameMapper: {
     "\\.(css)$": "identity-obj-proxy",
   },
-  setupFilesAfterEnv: ["@testing-library/jest-dom"],
 };

packages/single-spa-welcome/package.json

@@ -21,47 +21,48 @@
     "start:standalone": "webpack serve --env standalone",
     "build": "webpack --mode=production",
     "analyze": "webpack --mode=production --env analyze",
-    "lint": "eslint src --ext js",
+    "lint": "eslint src",
     "format": "prettier --write .",
     "test": "cross-env BABEL_ENV=test jest",
     "watch-tests": "cross-env BABEL_ENV=test jest --watch",
     "coverage": "cross-env BABEL_ENV=test jest --coverage",
     "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/runtime": "^7.23.3",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^27.0.1",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.5",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/runtime": "^7.26.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.17.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.2.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
-    "prettier": "^2.3.2",
-    "pretty-quick": "^3.1.1",
-    "single-spa-react": "^6.0.1",
-    "style-loader": "^3.2.1",
+    "jest-cli": "^29.7.0",
+    "prettier": "^3.4.2",
+    "pretty-quick": "^4.0.0",
+    "single-spa-react": "^6.0.2",
+    "style-loader": "^4.0.0",
     "ts-config-single-spa": "workspace:*",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4",
     "webpack-config-single-spa-react": "workspace:*",
-    "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-dev-server": "^5.2.0",
+    "webpack-merge": "^6.0.1"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

packages/single-spa-welcome/src/single-spa-welcome.js

@@ -1,11 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOMClient from "react-dom/client";
 import singleSpaReact from "single-spa-react";
 import Welcome from "./welcome";
 
 const lifecycles = singleSpaReact({
   React,
-  ReactDOM,
+  ReactDOMClient,
   rootComponent: Welcome,
   errorBoundary(err, info, props) {
     // Customize the root error boundary for your microfrontend here.