Update create iModel package to itwinui-react V3

common/changes/@itwin/create-imodel-react/vp-Update-create-iModel-package_2025-05-05-09-58.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/create-imodel-react",
+      "comment": "Updated create-imodel-react to itwin-react V3",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/create-imodel-react"
+}

packages/modules/create-imodel/package.json

@@ -31,11 +31,13 @@
     "clean": "rimraf cjs esm"
   },
   "dependencies": {
-    "@itwin/itwinui-react": "^2.12.18"
+    "@itwin/itwinui-react": "^3.18.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "~17.1.0",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^27.5.1",
     "@types/node": "^14.14.35",
     "@types/react": "^18.3.5",

packages/modules/create-imodel/src/components/base-imodel/BaseIModel.test.tsx

@@ -2,7 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { fireEvent, render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { ThemeProvider } from "@itwin/itwinui-react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import React from "react";
 
 import { BaseIModelPage } from "./BaseIModel";
@@ -12,11 +15,15 @@ describe("BaseIModel", () => {
     jest.clearAllMocks();
   });
 
-  it("should show base page", () => {
+  const renderWithThemeProvider = (children: React.ReactNode) => {
+    return render(<ThemeProvider>{children}</ThemeProvider>);
+  };
+
+  it("should show base page", async () => {
     const actionMock = jest.fn();
     const closeMock = jest.fn();
 
-    const { container, getByText } = render(
+    const { container, getByText } = renderWithThemeProvider(
       <BaseIModelPage onActionClick={actionMock} onClose={closeMock} />
     );
 
@@ -37,19 +44,19 @@ describe("BaseIModel", () => {
     const confirmButton = container.querySelector(
       ".iac-button-bar button:first-child"
     ) as HTMLButtonElement;
-    expect(confirmButton.disabled).toBe(true);
+    expect(confirmButton).toHaveAttribute("aria-disabled", "true");
     expect(confirmButton.textContent).toBe("Create");
-    confirmButton.click();
+    await act(() => fireEvent.click(confirmButton));
     expect(actionMock).not.toHaveBeenCalled();
     const cancelButton = container.querySelector(
       ".iac-button-bar button:last-child"
     ) as HTMLButtonElement;
-    cancelButton.click();
+    await act(() => fireEvent.click(cancelButton));
     expect(closeMock).toHaveBeenCalled();
   });
 
   it("should show base page with custom extent component", () => {
-    const { container, getByText, queryByText } = render(
+    const { container, getByText, queryByText } = renderWithThemeProvider(
       <BaseIModelPage extentComponent={<div className="test-extent-map" />} />
     );
 
@@ -70,34 +77,40 @@ describe("BaseIModel", () => {
     const confirmButton = container.querySelector(
       ".iac-button-bar button:first-child"
     ) as HTMLButtonElement;
-    expect(confirmButton.disabled).toBe(true);
+    expect(confirmButton).toHaveAttribute("aria-disabled", "true");
     expect(confirmButton.textContent).toBe("Create");
 
     expect(container.querySelector(".test-extent-map")).toBeTruthy();
   });
 
   it("should show overlay spinner", () => {
-    const { container } = render(<BaseIModelPage isLoading />);
+    const { container } = renderWithThemeProvider(<BaseIModelPage isLoading />);
 
     expect(container.querySelector(".iac-overlay-container")).toBeTruthy();
   });
 
   it("should show error message for too long string", async () => {
-    const { container, getByText } = render(<BaseIModelPage />);
+    const { container, getByText } = renderWithThemeProvider(
+      <BaseIModelPage />
+    );
 
     const name = container.querySelector(
       ".iac-inputs-container input"
     ) as HTMLInputElement;
-    fireEvent.change(name, { target: { value: new Array(260).join("a") } });
+    await waitFor(async () =>
+      fireEvent.change(name, {
+        target: { value: new Array(260).join("a") },
+      })
+    );
     getByText("The value exceeds allowed 255 characters.");
     const confirmButton = container.querySelector(
       ".iac-button-bar button:first-child"
     ) as HTMLButtonElement;
-    expect(confirmButton.disabled).toBe(true);
+    expect(confirmButton).toHaveAttribute("aria-disabled", "true");
   });
 
   it("should show base page with filled values", () => {
-    const { container } = render(
+    const { container } = renderWithThemeProvider(
       <BaseIModelPage
         initialIModel={{
           name: "Some name",