@backstage/create-app 0.5.9 → 0.5.10

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/create-app
 
+## 0.5.10
+
+### Patch Changes
+
+- e830cdd: Updated `packages/app` as well as the root `package.json` type resolutions to use React v18.
+
+  The `@testing-library/*` dependencies have also been updated to the ones compatible with React v18, and the test at `packages/app/src/App.test.tsx` had been updated to use more modern patterns that work better with these new versions.
+
+  For information on how to migrate existing apps to React v18, see the [migration guide](https://backstage.io/docs/tutorials/react18-migration)
+
 ## 0.5.9
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -65,7 +65,7 @@ ${chalk__default["default"].red(`${error}`)}
   }
 }
 
-var version$O = "1.22.0";
+var version$O = "1.22.1";
 
 var version$N = "1.4.7";
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/create-app",
   "description": "A CLI that helps you create your own Backstage app",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "publishConfig": {
     "access": "public"
   },

package/templates/default-app/package.json.hbs

@@ -42,8 +42,8 @@
     "typescript": "~5.2.0"
   },
   "resolutions": {
-    "@types/react": "^17",
-    "@types/react-dom": "^17"
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {

package/templates/default-app/packages/app/package.json.hbs

@@ -42,8 +42,8 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4"
@@ -51,10 +51,10 @@
   "devDependencies": {
     "@backstage/test-utils": "^{{version '@backstage/test-utils'}}",
     "@playwright/test": "^1.32.3",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "@testing-library/dom": "^8.0.0",
+    "@testing-library/dom": "^9.0.0",
     "@types/react-dom": "*",
     "cross-env": "^7.0.0"
   },

package/templates/default-app/packages/app/src/App.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithEffects } from '@backstage/test-utils';
+import { render, waitFor } from '@testing-library/react';
 import App from './App';
 
 describe('App', () => {
@@ -20,7 +20,10 @@ describe('App', () => {
       ] as any,
     };
 
-    const rendered = await renderWithEffects(<App />);
-    expect(rendered.baseElement).toBeInTheDocument();
+    const rendered = render(<App />);
+
+    await waitFor(() => {
+      expect(rendered.baseElement).toBeInTheDocument();
+    });
   });
 });

package/templates/default-app/packages/app/src/index.tsx

@@ -1,6 +1,6 @@
 import '@backstage/cli/asset-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);