chore: update react and related dependencies to latest versions

.github/dependabot.yml

@@ -9,10 +9,6 @@ updates:
       - dependencies
     versioning-strategy: widen
     ignore:
-      - dependency-name: "react"
-      - dependency-name: "react-dom"
-      - dependency-name: "react-router-dom"
-      - dependency-name: "@docsearch/react"
       - dependency-name: "tailwindcss"
     groups:
       dependencies:

cypress/e2e/code-block-with-copy.cy.js

@@ -64,6 +64,9 @@ describe("CodeBlockWithCopy", () => {
   it("copies non-diff code blocks without altering content", () => {
     visitWithClipboardSpy("/concepts/");
 
+    // Wait for Suspense content to load before querying code blocks
+    cy.get("button.copy-button").should("exist");
+
     // Select the first webpack.config.js example and its copy wrapper.
     getFirstWebpackConfigBlock("standardCodeBlock");
 
@@ -73,6 +76,7 @@ describe("CodeBlockWithCopy", () => {
       .find("code")
       .invoke("text")
       .as("expectedCopiedText");
+    cy.get("@standardCodeBlock").find("button.copy-button").should("exist");
     cy.get("@standardCodeBlock").find("button.copy-button").click();
 
     // Assert copied output is unchanged for regular code blocks.

cypress/e2e/pr_4435.cy.js

@@ -9,16 +9,18 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         cy.stub(win, "scrollTo");
       },
     });
+    // wait for page content to load before asserting scroll
+    cy.get('.sidebar-item__title[href="/concepts/plugins/"]').should("exist");
     // there's one call in Page.jsx when componentDidMount
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       expect(win.scrollTo).to.be.calledOnce;
     });
 
     const selector = '.sidebar-item__title[href="/concepts/plugins/"]';
 
     // we click the menu
     cy.get(selector).click();
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       // we don't know whether user has scrolled the page or not although no pathname changed
       expect(win.scrollTo).to.be.calledTwice;
     });
@@ -28,7 +30,7 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         metaKey: true,
       });
       // no scrollTo should be called
-      cy.window().then((win) => {
+      cy.window().should((win) => {
         expect(win.scrollTo).to.be.calledTwice;
       });
     } else if (Cypress.platform === "win32" || Cypress.platform === "linux") {
@@ -37,14 +39,14 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         ctrlKey: true,
       });
       // no scrollTo should be called
-      cy.window().then((win) => {
+      cy.window().should((win) => {
         expect(win.scrollTo).to.be.calledTwice;
       });
     }
 
     // we click the menu again, scroll to top again
     cy.get(selector).click();
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       expect(win.scrollTo).to.be.calledThrice;
     });
   });

eslint.config.mjs

@@ -15,6 +15,7 @@ export default defineConfig([
     ".github/**/*.md",
     "**/README.md",
     "src/mdx-components.mjs",
+    "**/setupTests.js",
   ]),
   {
     extends: [configs.recommended],

jest.config.mjs

@@ -1,6 +1,7 @@
 export default {
   verbose: true,
   testEnvironment: "node",
+  setupFiles: ["./src/setupTests.js"],
   transform: {
     "^.+\\.jsx?$": "babel-jest",
   },

package.json

@@ -73,31 +73,33 @@
     "eval": "^0.1.5"
   },
   "dependencies": {
-    "@docsearch/react": "^3.9.0",
+    "@docsearch/react": "^4.6.0",
     "@react-spring/web": "^10.0.3",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.28.0",
-    "react-tiny-popover": "5",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-helmet-async": "^3.0.0",
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
+    "react-tiny-popover": "^8.1.6",
     "react-use": "^17.6.0",
-    "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
     "workbox-window": "^7.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.27.6",
+    "@babel/preset-react": "^7.28.5",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@octokit/auth-action": "^6.0.2",
     "@octokit/rest": "^22.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "autoprefixer": "^10.4.24",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.1",
@@ -134,7 +136,6 @@
     "postcss-loader": "^8.2.0",
     "prettier": "^3.8.1",
     "react-refresh": "^0.18.0",
-    "react-test-renderer": "^17.0.2",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^15.0.1",
     "remark-autolink-headings": "7.0.1",

src/components/Badge/Badge.test.jsx

@@ -1,11 +1,15 @@
+/**
+ * @jest-environment jsdom
+ */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { describe, expect, it } from "@jest/globals";
-import renderer from "react-test-renderer";
+
+import { render } from "@testing-library/react";
 import Badge from "./Badge.jsx";
 
 describe("Badge", () => {
   it("renders correctly with text prop", () => {
-    const tree = renderer.create(<Badge text="webpack" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<Badge text="webpack" />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/components/Badge/__snapshots__/Badge.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Badge renders correctly with text prop 1`] = `
 <span
-  className="badge"
+  class="badge"
 >
   webpack
 </span>

src/components/Container/Container.test.jsx

@@ -1,28 +1,28 @@
+/**
+ * @jest-environment jsdom
+ */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { describe, expect, it } from "@jest/globals";
-import renderer from "react-test-renderer";
+
+import { render } from "@testing-library/react";
 import Container from "./Container.jsx";
 
 describe("Container", () => {
   it("renders correctly with children and className", () => {
-    const tree = renderer
-      .create(
-        <Container className="test-class">
-          <p>Child content</p>
-        </Container>,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(
+      <Container className="test-class">
+        <p>Child content</p>
+      </Container>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it("renders correctly without className", () => {
-    const tree = renderer
-      .create(
-        <Container>
-          <span>Simple child</span>
-        </Container>,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(
+      <Container>
+        <span>Simple child</span>
+      </Container>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/components/Container/__snapshots__/Container.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly with children and className 1`] = `
 <div
-  className="container test-class"
+  class="container test-class"
 >
   <p>
     Child content
@@ -12,7 +12,7 @@ exports[`Container renders correctly with children and className 1`] = `
 
 exports[`Container renders correctly without className 1`] = `
 <div
-  className="container "
+  class="container "
 >
   <span>
     Simple child