Add React type compatibility tests

packages/app-bridge-react/package.json

@@ -24,7 +24,8 @@
     "build": "vite build",
     "watch": "vite build --watch --mode=development",
     "test": "vitest run --passWithNoTests",
-    "type-check": "tsc -p tsconfig.json --noEmit",
+    "type-check": "tsc -p tsconfig.json --noEmit && pnpm run type-check:tests",
+    "type-check:tests": "tsc -p tests && tsc -p tests/tsconfig.react19.json",
     "coverage": "vitest run --passWithNoTests --coverage",
     "lint": "oxlint -c .eslintrc.json"
   },
@@ -71,6 +72,7 @@
     "@shopify/typescript-configs": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
+    "@types/react-19": "npm:@types/react@19.2.18",
     "@types/react-dom": "catalog:",
     "oxlint": "catalog:",
     "react": "catalog:",

packages/app-bridge-react/tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": false
+  },
+  "include": ["types.test-d.tsx"]
+}

packages/app-bridge-react/tests/tsconfig.react19.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "paths": {
+      "react": ["node_modules/@types/react-19"],
+      "react/*": ["node_modules/@types/react-19/*"]
+    },
+    "types": []
+  }
+}

packages/app-bridge-react/tests/types.test-d.tsx

@@ -0,0 +1,40 @@
+import {createRef} from 'react';
+import type {} from '@shopify/app-bridge-react';
+
+export const elements = (
+  <>
+    <ui-modal
+      id="product-modal"
+      variant="large"
+      src="/products"
+      ref={createRef<UIModalElement>()}
+    />
+    <ui-nav-menu ref={createRef<UINavMenuElement>()} />
+    <ui-save-bar
+      id="product-save-bar"
+      discardConfirmation
+      ref={createRef<UISaveBarElement>()}
+    />
+    <ui-title-bar title="Products" ref={createRef<UITitleBarElement>()} />
+  </>
+);
+
+// @ts-expect-error Unknown attributes should not be accepted.
+export const modalWithUnknownAttribute = <ui-modal unknownAttribute />;
+// @ts-expect-error Unknown attributes should not be accepted.
+export const navMenuWithUnknownAttribute = <ui-nav-menu unknownAttribute />;
+// @ts-expect-error Unknown attributes should not be accepted.
+export const saveBarWithUnknownAttribute = <ui-save-bar unknownAttribute />;
+// @ts-expect-error Unknown attributes should not be accepted.
+export const titleBarWithUnknownAttribute = <ui-title-bar unknownAttribute />;
+
+const wrongRef = createRef<{notAnAppBridgeElement: true}>();
+
+// @ts-expect-error The ref should point to a UIModalElement.
+export const modalWithWrongRef = <ui-modal ref={wrongRef} />;
+// @ts-expect-error The ref should point to a UINavMenuElement.
+export const navMenuWithWrongRef = <ui-nav-menu ref={wrongRef} />;
+// @ts-expect-error The ref should point to a UISaveBarElement.
+export const saveBarWithWrongRef = <ui-save-bar ref={wrongRef} />;
+// @ts-expect-error The ref should point to a UITitleBarElement.
+export const titleBarWithWrongRef = <ui-title-bar ref={wrongRef} />;