Update create iModel package to itwinui-react V3

common/changes/@itwin/create-imodel-react/vp-Update-create-iModel-package_2025-04-25-10-07.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/create-imodel-react",
+      "comment": "Updated create-imodel-react to itwin-react V3",
+      "type": "major"
+    }
+  ],
+  "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,9 @@
  * 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 { act, fireEvent, render, waitFor } from "@testing-library/react";
 import React from "react";
 
 import { BaseIModelPage } from "./BaseIModel";
@@ -12,7 +14,7 @@ describe("BaseIModel", () => {
     jest.clearAllMocks();
   });
 
-  it("should show base page", () => {
+  it("should show base page", async () => {
     const actionMock = jest.fn();
     const closeMock = jest.fn();
 
@@ -37,14 +39,14 @@ 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();
   });
 
@@ -70,7 +72,7 @@ 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();
@@ -88,12 +90,16 @@ describe("BaseIModel", () => {
     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", () => {

packages/modules/create-imodel/src/components/button-bar/ButtonBar.test.tsx

@@ -2,7 +2,9 @@
  * 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 { act, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
 import { IModelContext, InnerIModelContext } from "../context/imodel-context";
@@ -41,22 +43,28 @@ describe("ButtonBar", () => {
   it("should show buttons with value from context API", async () => {
     const { getByText } = render(renderFunction());
 
-    fireEvent.click(getByText(innerContextValue.confirmButtonText));
+    await act(() =>
+      fireEvent.click(getByText(innerContextValue.confirmButtonText))
+    );
     expect(callbackFun).toHaveBeenCalled();
   });
 
   it("should disable create button if isPrimaryButtonDisabled context prop is true", async () => {
-    const { getByText } = render(
-      renderFunction({ isPrimaryButtonDisabled: true })
-    );
+    render(renderFunction({ isPrimaryButtonDisabled: true }));
 
-    const buttonConfirm = getByText(
-      innerContextValue.confirmButtonText
-    ) as HTMLInputElement;
-    const buttonCancel = getByText(
-      innerContextValue.cancelButtonText
-    ) as HTMLInputElement;
-    expect(buttonConfirm.closest("button")?.disabled).toBe(true);
-    expect(buttonCancel.closest("button")?.disabled).toBe(false);
+    const buttonConfirm = (await screen.findByRole("button", {
+      name: innerContextValue.confirmButtonText,
+    })) as HTMLButtonElement;
+    const buttonCancel = (await screen.findByRole("button", {
+      name: innerContextValue.cancelButtonText,
+    })) as HTMLButtonElement;
+    expect(buttonConfirm.closest("button")).toHaveAttribute(
+      "aria-disabled",
+      "true"
+    );
+    expect(buttonCancel.closest("button")).not.toHaveAttribute(
+      "aria-disabled",
+      "true"
+    );
   });
 });