ESM tests (#755)

* ESM tests

* fix snapshot file paths

* update snapshot

* Configure react testing library to always use strict mode. Use individual `configure` calls to specify otherwise.

* lint

.vscode/launch.json

@@ -88,7 +88,7 @@
       ],
       "env": {
         "NODE_ENV": "development",
-        "NODE_OPTIONS": "--enable-source-maps"
+        "NODE_OPTIONS": "--enable-source-maps  --import presentation-test-utilities/node-hooks/ignore-styles"
       }
     },
     {
@@ -233,7 +233,7 @@
       ],
       "env": {
         "NODE_ENV": "development",
-        "NODE_OPTIONS": "--enable-source-maps"
+        "NODE_OPTIONS": "--enable-source-maps  --import presentation-test-utilities/node-hooks/ignore-styles"
       }
     },
     {
@@ -273,7 +273,7 @@
       ],
       "env": {
         "NODE_ENV": "development",
-        "NODE_OPTIONS": "--enable-source-maps"
+        "NODE_OPTIONS": "--enable-source-maps --import presentation-test-utilities/node-hooks/ignore-styles"
       }
     }
   ],

apps/full-stack-tests/.mocharc.json

@@ -1,7 +1,7 @@
 {
   "require": ["ignore-styles", "./lib/setup.js"],
   "checkLeaks": true,
-  "globals": ["requestAnimationFrame", "IS_REACT_ACT_ENVIRONMENT"],
+  "globals": ["requestAnimationFrame", "IS_REACT_ACT_ENVIRONMENT", "__iui"],
   "timeout": 60000,
   "slow": 500,
   "spec": ["./lib/**/*.test.js"]

apps/full-stack-tests/eslint.config.cjs

@@ -12,11 +12,11 @@ module.exports = [
     ...iTwinPlugin.configs.iTwinjsRecommendedConfig,
   },
   {
-    files: ["src/{components,hierarchies-react}/**/*.{ts,tsx}"],
+    files: ["src/{components,hierarchies-react}/**/*.{ts,tsx}", "src/**/*.tsx"],
     ...iTwinPlugin.configs.uiConfig,
   },
   {
-    files: ["src/{components,hierarchies-react}/**/*.{ts,tsx}"],
+    files: ["src/{components,hierarchies-react}/**/*.{ts,tsx}", "src/**/*.tsx"],
     rules: {
       ...reactPlugin.configs["jsx-runtime"].rules,
     },

apps/full-stack-tests/package.json

@@ -3,13 +3,14 @@
   "version": "0.0.0",
   "description": "Presentation integration tests",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "node ./scripts/setup-tests.cjs && tsc",
     "clean": "rimraf lib build",
     "cover": "npm run -s test",
     "lint": "eslint ./src/**/*.{ts,tsx}",
-    "test": "mocha --enable-source-maps --parallel --config ./.mocharc.json",
-    "test:dev": "mocha --enable-source-maps --config ./.mocharc.json",
+    "test:dev": "cross-env NODE_OPTIONS=\"--import presentation-test-utilities/node-hooks/ignore-styles\" mocha --enable-source-maps --config ./.mocharc.json",
+    "test": "npm run test:dev -- --parallel --jobs=4",
     "docs": "betools extract --fileExt=ts,tsx --extractFrom=./src --recursive --out=./build/docs/extract"
   },
   "dependencies": {
@@ -64,6 +65,7 @@
     "chai-jest-snapshot": "catalog:test-tools",
     "chai-subset": "catalog:test-tools",
     "cpx2": "catalog:build-tools",
+    "cross-env": "catalog:build-tools",
     "eslint": "catalog:build-tools",
     "fast-xml-parser": "^4.5.0",
     "global-jsdom": "catalog:test-tools",

apps/full-stack-tests/src/IntegrationTests.ts

@@ -66,7 +66,7 @@ export async function initialize(props?: { backendTimeout?: number }) {
   const presentationTestingInitProps: PresentationTestingInitProps = {
     rpcs: [SnapshotIModelRpcInterface, IModelReadRpcInterface, PresentationRpcInterface, ECSchemaRpcInterface],
     backendProps: backendInitProps,
-    backendHostProps: { cacheDir: path.join(__dirname, ".cache", `${process.pid}`) },
+    backendHostProps: { cacheDir: path.join(import.meta.dirname, ".cache", `${process.pid}`) },
     frontendProps: frontendInitProps,
     frontendApp: IntegrationTestsApp,
     frontendAppOptions,

apps/full-stack-tests/src/RenderUtils.tsx

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import { createElement, PropsWithChildren, ReactElement } from "react";
+import { ThemeProvider } from "@itwin/itwinui-react";
+import { RenderOptions, RenderResult, render as renderRTL } from "@testing-library/react";
+import { userEvent, UserEvent } from "@testing-library/user-event";
+
+function createWrapper(Outer: React.JSXElementConstructor<{ children: React.ReactNode }>) {
+  return (Inner?: React.JSXElementConstructor<{ children: React.ReactNode }>) => {
+    return Inner ? ({ children }: PropsWithChildren<unknown>) => createElement(Outer, undefined, createElement(Inner, undefined, children)) : Outer;
+  };
+}
+
+function combineWrappers(wraps: Array<ReturnType<typeof createWrapper>>, wrapper?: React.JSXElementConstructor<{ children: React.ReactNode }>) {
+  let currWrapper = wrapper;
+  for (const wrap of wraps) {
+    currWrapper = wrap(currWrapper);
+  }
+  return currWrapper;
+}
+
+function createDefaultWrappers(addThemeProvider?: boolean) {
+  const wrappers: Array<ReturnType<typeof createWrapper>> = [];
+  if (addThemeProvider) {
+    wrappers.push(createWrapper(ThemeProvider));
+  }
+  return wrappers;
+}
+
+/**
+ * Custom render function that wraps around `render` function from `@testing-library/react` and additionally
+ * setup `userEvent` from `@testing-library/user-event`.
+ *
+ * It should be used when test need to do interactions with rendered components.
+ */
+function customRender(ui: ReactElement, options?: RenderOptions & { addThemeProvider?: boolean }): RenderResult & { user: UserEvent } {
+  const wrappers = createDefaultWrappers(options?.addThemeProvider);
+  const wrapper = combineWrappers(wrappers, options?.wrapper);
+  return {
+    ...renderRTL(ui, { ...options, wrapper }),
+    user: userEvent.setup(),
+  };
+}
+
+export * from "@testing-library/react";
+export { customRender as render };

apps/full-stack-tests/src/components/ErrorBoundary.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Component } from "react";
-import { getByText, waitFor } from "@testing-library/react";
+import { getByText, waitFor } from "../RenderUtils.js";
 
 // __PUBLISH_EXTRACT_START__ Presentation.Components.SampleErrorBoundary
 /**

apps/full-stack-tests/src/components/properties/ErrorHandling.test.tsx

@@ -13,8 +13,8 @@ import { InstanceKey, KeySet, PresentationRpcInterface } from "@itwin/presentati
 import { PresentationPropertyDataProvider } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { render } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { render } from "../../RenderUtils.js";
 import { useOptionalDisposable } from "../../UseOptionalDisposable.js";
 import { ensureHasError, ErrorBoundary } from "../ErrorBoundary.js";
 import { ensurePropertyGridHasPropertyRecord } from "../PropertyGridUtils.js";
@@ -27,6 +27,7 @@ describe("Learning snippets", () => {
     });
 
     after(async () => {
+      UiComponents.terminate();
       await terminate();
     });
 

apps/full-stack-tests/src/components/properties/PresentationFilterBuilderValueRenderer.test.tsx

@@ -6,19 +6,18 @@ import { expect } from "chai";
 import { insertPhysicalElement, insertPhysicalModelWithPartition, insertSpatialCategory, waitFor } from "presentation-test-utilities";
 import sinon from "sinon";
 import { UiComponents } from "@itwin/components-react";
-import { EmptyLocalization } from "@itwin/core-common";
+import { IModelApp } from "@itwin/core-frontend";
 import { ClassInfo, DefaultContentDisplayTypes, KeySet } from "@itwin/presentation-common";
 import { PresentationFilterBuilderValueRenderer } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
-import { queryByText, render } from "@testing-library/react";
-import { userEvent } from "@testing-library/user-event";
 import { buildIModel, importSchema } from "../../IModelUtils.js";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { queryByText, render } from "../../RenderUtils.js";
 
 describe("Presentation filter builder value renderer", () => {
   before(async () => {
     await initialize();
-    await UiComponents.initialize(new EmptyLocalization());
+    await UiComponents.initialize(IModelApp.localization);
 
     sinon.stub(window.Element.prototype, "getBoundingClientRect").returns({
       height: 20,
@@ -35,6 +34,7 @@ describe("Presentation filter builder value renderer", () => {
 
   after(async () => {
     sinon.restore();
+    UiComponents.terminate();
     await terminate();
   });
 
@@ -133,7 +133,7 @@ describe("Presentation filter builder value renderer", () => {
       },
     ];
 
-    const { baseElement, getByRole } = render(
+    const { baseElement, getByRole, user } = render(
       <PresentationFilterBuilderValueRenderer
         property={testProperty}
         onChange={() => {}}
@@ -146,7 +146,6 @@ describe("Presentation filter builder value renderer", () => {
     );
 
     // trigger loadTargets function
-    const user = userEvent.setup();
     const combobox = await waitFor(() => getByRole("combobox"));
     await user.click(combobox);
     await waitFor(async () => {
@@ -250,7 +249,7 @@ describe("Presentation filter builder value renderer", () => {
       },
     ];
 
-    const { baseElement, getByRole } = render(
+    const { baseElement, getByRole, user } = render(
       <PresentationFilterBuilderValueRenderer
         property={testProperty}
         onChange={() => {}}
@@ -262,7 +261,6 @@ describe("Presentation filter builder value renderer", () => {
     );
 
     // trigger loadTargets function
-    const user = userEvent.setup();
     const combobox = await waitFor(() => getByRole("combobox"));
     await user.click(combobox);
     await waitFor(async () => {

apps/full-stack-tests/src/components/table/ErrorHandling.test.tsx

@@ -13,8 +13,8 @@ import { InstanceKey, KeySet, Ruleset } from "@itwin/presentation-common";
 import { TableColumnDefinition, TableRowDefinition, usePresentationTable } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { render } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { render } from "../../RenderUtils.js";
 import { ensureHasError, ErrorBoundary } from "../ErrorBoundary.js";
 import { ensureTableHasRowsWithCellValues } from "../TableUtils.js";
 
@@ -26,6 +26,7 @@ describe("Learning snippets", () => {
     });
 
     after(async () => {
+      UiComponents.terminate();
       await terminate();
     });
 

apps/full-stack-tests/src/components/tree/ErrorHandling.test.tsx

@@ -14,8 +14,8 @@ import { Ruleset } from "@itwin/presentation-common";
 import { PresentationTree, PresentationTreeRenderer, usePresentationTreeState } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { getByRole, render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { getByRole, render, waitFor } from "../../RenderUtils.js";
 import { getNodeByLabel, toggleExpandNode } from "../TreeUtils.js";
 
 describe("Learning snippets", () => {
@@ -28,6 +28,7 @@ describe("Learning snippets", () => {
 
     after(async () => {
       delete (HTMLElement.prototype as any).scrollIntoView;
+      UiComponents.terminate();
       await terminate();
     });
 

apps/full-stack-tests/src/components/tree/HierarchyLevelFiltering.test.tsx

@@ -12,9 +12,8 @@ import { IModelApp, IModelConnection } from "@itwin/core-frontend";
 import { Ruleset } from "@itwin/presentation-common";
 import { PresentationTree, PresentationTreeRenderer, usePresentationTreeState } from "@itwin/presentation-components";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { getByPlaceholderText, getByRole, getByTitle, render, waitFor } from "@testing-library/react";
-import { userEvent } from "@testing-library/user-event";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { getByPlaceholderText, getByRole, getByTitle, render, waitFor } from "../../RenderUtils.js";
 import { stubGetBoundingClientRect } from "../../Utils.js";
 import { getNodeByLabel, toggleExpandNode } from "../TreeUtils.js";
 
@@ -31,6 +30,7 @@ describe("Learning snippets", () => {
 
     after(async () => {
       delete (HTMLElement.prototype as any).scrollIntoView;
+      UiComponents.terminate();
       await terminate();
     });
 
@@ -74,8 +74,7 @@ describe("Learning snippets", () => {
       });
 
       // render the component
-      const user = userEvent.setup();
-      const { container, baseElement } = render(<MyTree imodel={imodel} />);
+      const { container, baseElement, user } = render(<MyTree imodel={imodel} />, { addThemeProvider: true });
       await waitFor(() => getByRole(container, "tree"));
 
       // find & expand the model node

apps/full-stack-tests/src/components/tree/HierarchyLevelLimiting.test.tsx

@@ -11,8 +11,8 @@ import { IModelApp, IModelConnection } from "@itwin/core-frontend";
 import { PresentationRpcInterface, Ruleset } from "@itwin/presentation-common";
 import { PresentationTree, PresentationTreeRenderer, usePresentationTreeState } from "@itwin/presentation-components";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { getByRole, render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { getByRole, render, waitFor } from "../../RenderUtils.js";
 import { getNodeByLabel, toggleExpandNode } from "../TreeUtils.js";
 
 describe("Learning snippets", () => {
@@ -25,6 +25,7 @@ describe("Learning snippets", () => {
 
     after(async () => {
       delete (HTMLElement.prototype as any).scrollIntoView;
+      UiComponents.terminate();
       await terminate();
     });
 
@@ -77,7 +78,7 @@ describe("Learning snippets", () => {
       });
 
       // render the component
-      const { container, getByText } = render(<MyTree imodel={imodel} />);
+      const { container, getByText } = render(<MyTree imodel={imodel} />, { addThemeProvider: true });
       await waitFor(() => getByRole(container, "tree"));
 
       // find & expand both model nodes

apps/full-stack-tests/src/components/tree/Update.test.tsx

@@ -21,8 +21,8 @@ import { IModelApp, IModelConnection, SnapshotConnection } from "@itwin/core-fro
 import { ChildNodeSpecificationTypes, Ruleset, RuleTypes } from "@itwin/presentation-common";
 import { IPresentationTreeDataProvider, usePresentationTreeState, UsePresentationTreeStateProps } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
-import { renderHook, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { renderHook, waitFor } from "../../RenderUtils.js";
 
 describe("Tree update", () => {
   let imodel: IModelConnection;

apps/full-stack-tests/src/components/unified-selection/Hilite.test.tsx

@@ -17,8 +17,8 @@ import { InstanceKey, KeySet } from "@itwin/presentation-common";
 import { viewWithUnifiedSelection } from "@itwin/presentation-components";
 import { Presentation, TRANSIENT_ELEMENT_CLASSNAME } from "@itwin/presentation-frontend";
 import { buildTestIModel as buildTestIModel } from "@itwin/presentation-testing";
-import { render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { render, waitFor } from "../../RenderUtils.js";
 
 describe("Unified Selection", () => {
   before(async () => {

apps/full-stack-tests/src/components/unified-selection/PropertyGrid.test.tsx

@@ -11,8 +11,8 @@ import { InstanceKey, KeySet } from "@itwin/presentation-common";
 import { PresentationPropertyDataProvider, usePropertyDataProviderWithUnifiedSelection } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { act, getByText, render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { act, getByText, render, waitFor } from "../../RenderUtils.js";
 import { useOptionalDisposable } from "../../UseOptionalDisposable.js";
 import { ensurePropertyGridHasPropertyRecord } from "../PropertyGridUtils.js";
 
@@ -24,6 +24,7 @@ describe("Learning snippets", async () => {
     });
 
     after(async () => {
+      UiComponents.terminate();
       await terminate();
     });
 

apps/full-stack-tests/src/components/unified-selection/Table.test.tsx

@@ -16,8 +16,8 @@ import {
 } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { act, getByText, render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { act, getByText, render, waitFor } from "../../RenderUtils.js";
 import { ensureTableHasRowsWithCellValues } from "../TableUtils.js";
 
 describe("Learning snippets", async () => {
@@ -28,6 +28,7 @@ describe("Learning snippets", async () => {
     });
 
     after(async () => {
+      UiComponents.terminate();
       await terminate();
     });
 

apps/full-stack-tests/src/components/unified-selection/Tree.test.tsx

@@ -17,8 +17,8 @@ import {
 } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { buildTestIModel } from "@itwin/presentation-testing";
-import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import { initialize, terminate } from "../../IntegrationTests.js";
+import { act, fireEvent, render, waitFor } from "../../RenderUtils.js";
 import { getNodeByLabel, isNodeSelectedInTree, toggleExpandNode } from "../TreeUtils.js";
 
 describe("Learning snippets", async () => {
@@ -29,6 +29,7 @@ describe("Learning snippets", async () => {
     });
 
     after(async () => {
+      UiComponents.terminate();
       await terminate();
     });