@buoy-gg/react-query 7.0.28 → 7.0.30

package/lib/commonjs/react-query/components/query-browser/QueryStatusCount.js

@@ -69,6 +69,7 @@ const QueryStatusCount = ({
         isActive: activeFilter === "fresh",
         onPress: event => handleFilterClick("fresh", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-status-fresh",
         showLabel: true // Always show labels now
         ,
         size: size
@@ -79,6 +80,7 @@ const QueryStatusCount = ({
         isActive: activeFilter === "fetching",
         onPress: event => handleFilterClick("fetching", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-status-fetching",
         showLabel: true // Always show labels now
         ,
         size: size
@@ -89,6 +91,7 @@ const QueryStatusCount = ({
         isActive: activeFilter === "paused",
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-status-paused",
         showLabel: true // Always show labels now
         ,
         size: size
@@ -99,6 +102,7 @@ const QueryStatusCount = ({
         isActive: activeFilter === "stale",
         onPress: event => handleFilterClick("stale", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-status-stale",
         showLabel: true // Always show labels now
         ,
         size: size
@@ -109,6 +113,7 @@ const QueryStatusCount = ({
         isActive: activeFilter === "inactive",
         onPress: event => handleFilterClick("inactive", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-status-inactive",
         showLabel: true // Always show labels now
         ,
         size: size

package/lib/commonjs/react-query/utils/testIDs.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.explorerTestID = explorerTestID;
+exports.keySlug = keySlug;
+exports.mutationRowTestID = mutationRowTestID;
+exports.queryRowTestID = queryRowTestID;
+/**
+ * Stable e2e handles for the React Query tool.
+ *
+ * Rows are addressed by their KEY, never by an index or a per-session id: a
+ * query's position moves every time the list re-sorts by `dataUpdatedAt`, and
+ * a mutation's `mutationId` is a counter that restarts with the process. The
+ * key is the one thing that means the same query on the next launch, which is
+ * also the only thing a test can name up front.
+ *
+ * `queryHash` would be stable too, but it is raw JSON (`["qbench","fresh"]`) —
+ * quotes and brackets that neither Detox's `by.id` nor a Maestro selector
+ * handles cleanly. So the parts are slugged and joined the way the rest of
+ * Buoy's handles read: `buoy-rq-query-row-qbench-fresh`.
+ */
+
+/** One key part → a testID-safe slug. */
+function slugPart(part) {
+  return String(part).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
+/** A query/mutation key (array or scalar) → its slug, e.g. `qbench-fresh`. */
+function keySlug(key) {
+  const parts = Array.isArray(key) ? key : [key];
+  return parts.filter(part => part != null).map(slugPart).filter(Boolean).join("-") || "unkeyed";
+}
+
+/** `buoy-rq-query-row-<slug>` for a query key. */
+function queryRowTestID(queryKey) {
+  return `buoy-rq-query-row-${keySlug(queryKey)}`;
+}
+
+/**
+ * `buoy-rq-mutation-row-<slug>` for a mutation.
+ *
+ * Anonymous mutations (no `mutationKey`) fall back to the id — unstable across
+ * launches, but so is the mutation itself, and an unkeyed mutation has nothing
+ * else to be named by.
+ */
+function mutationRowTestID(mutationKey, mutationId) {
+  return mutationKey == null ? `buoy-rq-mutation-row-id-${mutationId}` : `buoy-rq-mutation-row-${keySlug(mutationKey)}`;
+}
+
+/**
+ * `buoy-rq-explorer-<path>` for one node of the data explorer.
+ *
+ * The path is the same array the editor writes through
+ * (`updateNestedDataByPath`), so the handle and the write target can't drift:
+ * `buoy-rq-explorer-nested-count` edits `data.nested.count`.
+ */
+function explorerTestID(dataPath) {
+  return dataPath.length === 0 ? "buoy-rq-explorer-root" : `buoy-rq-explorer-${dataPath.map(slugPart).filter(Boolean).join("-")}`;
+}

package/lib/module/react-query/components/DataEditorMode.js

@@ -27,6 +27,7 @@ export function DataEditorMode({
   const actionButtons = useActionButtons(selectedQuery, queryClient, queryVersion);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(ScrollView, {
+      testID: "buoy-rq-detail-scroll",
       accessibilityLabel: "Data editor mode",
       accessibilityHint: "View data editor mode",
       "sentry-label": "ignore data editor mode",
@@ -54,6 +55,7 @@ export function DataEditorMode({
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.queryExplorerContainer,
           children: [/*#__PURE__*/_jsx(Text, {
+            testID: "buoy-rq-query-explorer-header",
             style: styles.queryExplorerHeader,
             children: "Query Explorer"
           }), /*#__PURE__*/_jsx(View, {
@@ -76,6 +78,7 @@ export function DataEditorMode({
       children: /*#__PURE__*/_jsx(View, {
         style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+          testID: `buoy-rq-action-${action.variant}`,
           onClick: action.onPress,
           text: action.label,
           variant: action.variant,
@@ -108,6 +111,7 @@ export function DataEditorActionsFooter({
     children: /*#__PURE__*/_jsx(View, {
       style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+        testID: `buoy-rq-action-${action.variant}`,
         onClick: action.onPress,
         text: action.label,
         variant: action.variant,
@@ -125,6 +129,7 @@ function DataExplorer({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.dataContainer,
     children: [/*#__PURE__*/_jsx(Text, {
+      testID: "buoy-rq-data-header",
       style: styles.dataHeader,
       children: "Data Editor"
     }), /*#__PURE__*/_jsx(View, {
@@ -177,9 +182,11 @@ function DataEmptyState({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.emptyState,
     children: [/*#__PURE__*/_jsx(Text, {
+      testID: "buoy-rq-detail-empty-title",
       style: styles.emptyTitle,
       children: title
     }), /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-rq-detail-empty-description",
       style: styles.emptyDescription,
       children: description
     })]

package/lib/module/react-query/components/FilterStatusBadge.js

@@ -19,12 +19,16 @@ export function FilterStatusBadge({
   const content = /*#__PURE__*/_jsx(View, {
     style: styles.container,
     children: /*#__PURE__*/_jsxs(Text, {
+      testID: "buoy-rq-filter-badge",
       style: styles.text,
       children: ["Showing ", filteredCount, " of ", totalCount]
     })
   });
   if (onPress) {
     return /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-rq-filter-badge-button",
+      accessibilityRole: "button",
+      accessibilityLabel: `Showing ${filteredCount} of ${totalCount}, open filters`,
       onPress: onPress,
       activeOpacity: 0.7,
       children: content

package/lib/module/react-query/components/MutationEditorMode.js

@@ -19,6 +19,7 @@ export function MutationEditorMode({
 }) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(ScrollView, {
+      testID: "buoy-rq-mutation-detail-scroll",
       accessibilityLabel: "Mutation editor mode",
       accessibilityHint: "View mutation editor mode",
       "sentry-label": "ignore mutation editor mode",
@@ -84,6 +85,7 @@ export function MutationEditorActionsFooter({
     children: /*#__PURE__*/_jsx(View, {
       style: styles.actionsGrid,
       children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+        testID: `buoy-rq-action-${action.variant}`,
         onClick: action.onPress,
         text: action.label,
         variant: action.variant,
@@ -143,9 +145,11 @@ function DataEmptyState({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.emptyState,
     children: [/*#__PURE__*/_jsx(Text, {
+      testID: "buoy-rq-mutation-detail-empty-title",
       style: styles.emptyTitle,
       children: title
     }), /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-rq-mutation-detail-empty-description",
       style: styles.emptyDescription,
       children: description
     })]

package/lib/module/react-query/components/WifiToggle.js

@@ -10,7 +10,8 @@ import { useWifiState } from "../hooks/useWifiState";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function WifiToggle({
-  size = 16
+  size = 16,
+  testID
 }) {
   const {
     isOnline,
@@ -18,6 +19,7 @@ export function WifiToggle({
   } = useWifiState();
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     "sentry-label": `ignore toggle WiFi ${isOnline ? "On" : "Off"}`,
+    testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: `WiFi ${isOnline ? "On" : "Off"}`,
     accessibilityHint: `Tap to turn WiFi ${isOnline ? "off" : "on"} for React Query`,

package/lib/module/react-query/components/modals/DataEditorModal.js

@@ -4,7 +4,7 @@ import { JsModal, devToolsStorageKeys, useSafeAreaInsets } from "@buoy-gg/shared
 import { useGetQueryByQueryKeyWithVersion } from "../../hooks/useSelectedQuery";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
 import { DataEditorMode, DataEditorActionsFooter } from "../DataEditorMode";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Specialized modal for data editing following "Decompose by Responsibility"
@@ -24,6 +24,30 @@ export function DataEditorModal({
     version: queryVersion
   } = useGetQueryByQueryKeyWithVersion(selectedQueryKey);
   const [modalMode, setModalMode] = useState("bottomSheet");
+
+  /**
+   * Fall back to the list when the selected query leaves the cache — a
+   * removal, a cache clear, or garbage collection. Same failure as the
+   * mutation editor: the key that selected it is still set, so this modal
+   * bails out and the browser stays hidden behind it, leaving an "open" tool
+   * with nothing on screen. The ref covers the tick before the subscription
+   * has resolved the query, when undefined does not yet mean gone.
+   */
+  const currentQueryKey = selectedQueryKey ? JSON.stringify(selectedQueryKey) : undefined;
+  const seenQueryKey = useRef(undefined);
+  useEffect(() => {
+    if (selectedQuery) {
+      seenQueryKey.current = currentQueryKey;
+      return;
+    }
+    // Keyed to THIS query for the same reason as the mutation editor: the
+    // last-seen key outlives the detail view, so an un-keyed check would fire
+    // on the next selection before its lookup has resolved.
+    if (visible && seenQueryKey.current !== undefined && seenQueryKey.current === currentQueryKey) {
+      seenQueryKey.current = undefined;
+      onQuerySelect(undefined);
+    }
+  }, [visible, selectedQuery, currentQueryKey, onQuerySelect]);
   const handleModeChange = useCallback(mode => {
     setModalMode(mode);
   }, []);

package/lib/module/react-query/components/modals/MutationEditorModal.js

@@ -4,7 +4,7 @@ import { JsModal, useSafeAreaInsets, devToolsStorageKeys } from "@buoy-gg/shared
 import { useGetMutationById } from "../../hooks/useSelectedMutation";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
 import { MutationEditorMode, MutationEditorActionsFooter } from "../MutationEditorMode";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Modal variant dedicated to editing a single mutation entry. Restores persisted positioning and
@@ -21,6 +21,38 @@ export function MutationEditorModal({
 }) {
   const selectedMutation = useGetMutationById(selectedMutationId);
   const [modalMode, setModalMode] = useState("bottomSheet");
+
+  /**
+   * Fall back to the list when the selected mutation leaves the cache.
+   *
+   * Without this the whole tool disappears. `Remove` (and a mutation-cache
+   * clear, and ordinary garbage collection) drops the entry while the id that
+   * selected it is still set, so this modal bails out on the missing mutation
+   * and the browser stays hidden behind an `inDetail` that is still true —
+   * leaving an "open" tool with nothing on screen and no way back except
+   * closing and reopening it from the dial.
+   *
+   * The ref is what makes it safe: `useGetMutationById` resolves on a
+   * `setTimeout(0)`, so the mutation is legitimately undefined for the first
+   * tick after a selection. Only a mutation that was HERE and then went away
+   * counts as gone.
+   */
+  const seenMutationId = useRef(undefined);
+  useEffect(() => {
+    if (selectedMutation) {
+      seenMutationId.current = selectedMutation.mutationId;
+      return;
+    }
+    // Only THIS mutation going missing counts. Keying the check to the id
+    // matters: leaving a detail view leaves the last-seen id behind, and a
+    // plain "we had one and now we don't" flag would fire on the very next
+    // selection — during the tick before its own lookup resolves — and bounce
+    // the user straight back out of the mutation they just opened.
+    if (visible && seenMutationId.current !== undefined && seenMutationId.current === selectedMutationId) {
+      seenMutationId.current = undefined;
+      onMutationSelect(undefined);
+    }
+  }, [visible, selectedMutation, selectedMutationId, onMutationSelect]);
   const handleModeChange = useCallback(mode => {
     setModalMode(mode);
   }, []);

package/lib/module/react-query/components/modals/QueryBrowserModal.js

@@ -168,6 +168,7 @@ export function QueryBrowserModal({
           children: /*#__PURE__*/_jsx(TabSelector, {
             tabs: tabs,
             activeTab: "filters",
+            testIDPrefix: "buoy-rq-filterview-tab",
             onTabChange: () => {}
           })
         })]

package/lib/module/react-query/components/modals/ReactQueryModalHeader.js

@@ -69,7 +69,8 @@ export function ReactQueryModalHeader({
       children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: getItemText(selectedQuery ?? selectedMutation)
+        title: getItemText(selectedQuery ?? selectedMutation),
+        testID: "buoy-rq-detail-title"
       })]
     });
   }
@@ -81,11 +82,13 @@ export function ReactQueryModalHeader({
       noMargin: true,
       children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
         style: styles.headerSearchContainer,
+        testID: "buoy-rq-search-field",
         children: [/*#__PURE__*/_jsx(Search, {
           size: 14,
           color: night.color.textSecondary
         }), /*#__PURE__*/_jsx(TextInput, {
           ref: searchInputRef,
+          testID: "buoy-rq-search",
           style: styles.headerSearchInput,
           placeholder: "Search query keys...",
           placeholderTextColor: night.color.textTertiary,
@@ -104,6 +107,9 @@ export function ReactQueryModalHeader({
             setIsSearchActive(false);
           },
           "sentry-label": "ignore clear search header",
+          testID: "buoy-rq-search-clear",
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear search",
           style: styles.headerSearchClear,
           children: /*#__PURE__*/_jsx(X, {
             size: 14,
@@ -117,19 +123,25 @@ export function ReactQueryModalHeader({
           children: /*#__PURE__*/_jsx(TabSelector, {
             tabs: tabs,
             activeTab: activeTab,
+            testIDPrefix: "buoy-rq-tab",
             onTabChange: tab => onTabChange(tab)
           })
         }), /*#__PURE__*/_jsx(WifiToggle, {
-          size: 16
+          size: 16,
+          testID: "buoy-rq-wifi"
         })]
       }) : /*#__PURE__*/_jsx(TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
+        testIDPrefix: "buoy-rq-tab",
         onTabChange: tab => onTabChange(tab)
       })
     }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         "sentry-label": "ignore open search",
+        testID: "buoy-rq-search-open",
+        accessibilityRole: "button",
+        accessibilityLabel: "Search queries and mutations",
         onPress: handleSearchToggle,
         style: styles.headerActionButton,
         children: /*#__PURE__*/_jsx(Search, {
@@ -138,6 +150,9 @@ export function ReactQueryModalHeader({
         })
       }), onFilterPress && /*#__PURE__*/_jsx(TouchableOpacity, {
         "sentry-label": "ignore open filter",
+        testID: "buoy-rq-filters",
+        accessibilityRole: "button",
+        accessibilityLabel: hasActiveFilters ? "Filters, active" : "Filters",
         onPress: onFilterPress,
         style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
         children: /*#__PURE__*/_jsx(Filter, {
@@ -146,6 +161,8 @@ export function ReactQueryModalHeader({
         })
       }), onClearCache && /*#__PURE__*/_jsx(TouchableOpacity, {
         "sentry-label": "ignore clear cache",
+        testID: "buoy-rq-clear-cache",
+        accessibilityRole: "button",
         onPress: onClearCache,
         style: [styles.headerActionButton, styles.clearCacheButton],
         accessibilityLabel: `Clear ${activeTab} cache`,

package/lib/module/react-query/components/query-browser/ActionButton.js

@@ -41,11 +41,13 @@ export default function ActionButton({
   onClick,
   text,
   variant,
-  disabled
+  disabled,
+  testID
 }) {
   const config = buttonConfigs[variant];
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
+    testID: testID,
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {

package/lib/module/react-query/components/query-browser/Explorer.js

@@ -5,6 +5,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { updateNestedDataByPath } from "../../utils/updateNestedDataByPath";
 import { displayValue, night } from "@buoy-gg/shared-ui";
 import deleteItem from "../../utils/actions/deleteItem";
+import { explorerTestID } from "../../utils/testIDs";
 import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
 import { CopyButton as SharedCopyButton } from "@buoy-gg/shared-ui";
 import { ChevronRight, ChevronDown, Trash } from "@buoy-gg/shared-ui";
@@ -84,6 +85,8 @@ const DeleteItemButton = /*#__PURE__*/memo(({
   if (!activeQuery) return null;
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     "sentry-label": "ignore devtools explorer delete button",
+    testID: `${explorerTestID(dataPath)}-delete`,
+    accessibilityRole: "button",
     onPress: handleDelete,
     style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
     accessibilityLabel: "Delete item",
@@ -113,7 +116,10 @@ const ClearArrayButton = /*#__PURE__*/memo(({
   if (!activeQuery) return null;
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     "sentry-label": "ignore devtools explorer clear button",
+    testID: `${explorerTestID(dataPath)}-clear`,
     style: [styles.clearButton, isFocused && styles.clearButtonFocused],
+    accessibilityRole: "button",
+    accessibilityLabel: "Remove all items",
     "aria-label": "Remove all items",
     onPress: handleClear,
     hitSlop: HIT_SLOP_OPTIMIZED,
@@ -158,6 +164,9 @@ function ToggleValueButton({
   const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools explorer toggle button",
+    testID: `${explorerTestID(dataPath)}-toggle`,
+    accessibilityRole: "button",
+    accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
     style: styles.modernToggleButton,
     onPress: handleClick,
     hitSlop: HIT_SLOP_OPTIMIZED,
@@ -170,6 +179,8 @@ function ToggleValueButton({
       })
     }), itemsDeletable && /*#__PURE__*/_jsx(TouchableOpacity, {
       "sentry-label": "ignore devtools explorer delete button in toggle",
+      testID: `${explorerTestID(dataPath)}-delete`,
+      accessibilityRole: "button",
       onPress: handleDelete,
       style: styles.deleteButtonInToggle,
       accessibilityLabel: "Delete item",
@@ -312,6 +323,12 @@ export default function Explorer({
           children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
             "sentry-label": "ignore devtools explorer expander button",
             style: styles.expanderButton,
+            testID: explorerTestID(currentDataPath),
+            accessibilityRole: "button",
+            accessibilityLabel: `${label}, ${subEntries.length} ${subEntries.length === 1 ? "item" : "items"}`,
+            accessibilityState: {
+              expanded: isExpanded
+            },
             onPress: toggleExpanded,
             hitSlop: HIT_SLOP_OPTIMIZED,
             activeOpacity: 0.6,
@@ -393,7 +410,8 @@ export default function Explorer({
             style: styles.nebulaInputWrapper,
             children: /*#__PURE__*/_jsx(CyberpunkInput, {
               label: label,
-              accessibilityLabel: "Data input field for editing values",
+              testID: `${explorerTestID(currentDataPath)}-input`,
+              accessibilityLabel: `${label}, editable value`,
               style: [valueType === "number" ? styles.textNumber : styles.textString],
               keyboardType: valueType === "number" ? "numeric" : "default",
               value: localInputValue,
@@ -438,6 +456,7 @@ export default function Explorer({
             style: styles.text344054,
             children: label
           }), /*#__PURE__*/_jsx(Text, {
+            testID: `${explorerTestID(currentDataPath)}-value`,
             style: styles.displayValueText,
             children: displayValue(value)
           })]

package/lib/module/react-query/components/query-browser/MutationButton.js

@@ -3,6 +3,7 @@
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";
 import { buoyColors, night, useRelativeTime } from "@buoy-gg/shared-ui";
+import { mutationRowTestID } from "../../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getMutationText = mutation => {
   if (!mutation.options.mutationKey) return "Anonymous Mutation";
@@ -69,8 +70,16 @@ export default function MutationButton({
     }
   };
   const statusInfo = getStatusInfo();
+  const mutationText = getMutationText(mutation);
+  const testID = mutationRowTestID(mutation.options.mutationKey, mutation.mutationId);
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools mutation button",
+    testID: testID,
+    accessibilityRole: "button"
+    // Same Fabric merge as the query rows: without a spelled-out label the
+    // row announces as an unnamed button.
+    ,
+    accessibilityLabel: `${mutationText}, ${statusInfo.status}`,
     onPress: () => setSelectedMutation(mutation === selected ? undefined : mutation),
     style: [styles.button, selected?.mutationId === mutation.mutationId && styles.selected],
     children: [/*#__PURE__*/_jsxs(View, {
@@ -84,6 +93,7 @@ export default function MutationButton({
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.statusInfo,
           children: [/*#__PURE__*/_jsx(Text, {
+            testID: `${testID}-status`,
             style: [styles.statusLabel, {
               color: statusInfo.color
             }],
@@ -96,8 +106,9 @@ export default function MutationButton({
       }), /*#__PURE__*/_jsx(View, {
         style: styles.mutationSection,
         children: /*#__PURE__*/_jsx(Text, {
+          testID: `${testID}-key`,
           style: styles.mutationKey,
-          children: getMutationText(mutation)
+          children: mutationText
         })
       })]
     }), /*#__PURE__*/_jsx(View, {

package/lib/module/react-query/components/query-browser/MutationDetails.js

@@ -26,11 +26,13 @@ export default function MutationDetails({
         horizontal: true,
         style: styles.flex1,
         children: /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-rq-mutation-detail-key",
           style: styles.flexWrap,
           children: `${selectedMutation.options.mutationKey ? displayValue(selectedMutation.options.mutationKey, true) : "No mutationKey found"}`
         })
       }), /*#__PURE__*/_jsx(MutationDetailsChips, {
-        status: selectedMutation.state.status
+        status: selectedMutation.state.status,
+        testID: "buoy-rq-mutation-detail-status"
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.row,

package/lib/module/react-query/components/query-browser/MutationDetailsChips.js

@@ -25,7 +25,8 @@ const textColors = {
  * Small status chip used in mutation detail views that adapts styling to the mutation status.
  */
 export default function QueryDetailsChip({
-  status
+  status,
+  testID
 }) {
   const statusToColor = status;
   const backgroundColor = backgroundColors[statusToColor];
@@ -37,6 +38,7 @@ export default function QueryDetailsChip({
       borderColor
     }],
     children: /*#__PURE__*/_jsx(Text, {
+      testID: testID,
       style: [styles.text, {
         color: textColor
       }],

package/lib/module/react-query/components/query-browser/MutationStatusCount.js

@@ -58,6 +58,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "pending",
         onPress: event => handleFilterClick("pending", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-pending",
         showLabel: true,
         size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
@@ -67,6 +68,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "success",
         onPress: event => handleFilterClick("success", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-success",
         showLabel: true,
         size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
@@ -76,6 +78,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "error",
         onPress: event => handleFilterClick("error", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-error",
         showLabel: true,
         size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
@@ -85,6 +88,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "paused",
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-paused",
         showLabel: true,
         size: size
       })]

package/lib/module/react-query/components/query-browser/MutationsList.js

@@ -114,12 +114,16 @@ export default function MutationsList({
       style: styles.listWrapper,
       children: /*#__PURE__*/_jsx(FlatList, {
         "sentry-label": "ignore devtools mutations list",
+        testID: "buoy-rq-mutation-list",
         data: filteredMutations,
         renderItem: renderMutation,
         keyExtractor: (item, index) => `${item.mutationId}-${item.state.submittedAt}-${item.state.status}-${index}`,
         inverted: true,
-        showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        showsVerticalScrollIndicator: true
+        // See QueryBrowser: e2e bundles keep every cell mounted so Detox's
+        // hittability check doesn't reject an on-screen row as clipped.
+        ,
+        removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
         contentContainerStyle: contentContainerStyle || styles.listContent,
         initialNumToRender: 10,
         maxToRenderPerBatch: 10,
@@ -130,6 +134,7 @@ export default function MutationsList({
       style: styles.emptyContainer,
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.emptyText,
+        testID: "buoy-rq-mutations-empty",
         children: activeFilter ? `No ${activeFilter} mutations found` : "No mutations found"
       })
     }), selectedMutation && !hideInfoPanel && /*#__PURE__*/_jsxs(Animated.View, {

package/lib/module/react-query/components/query-browser/QueryBrowser.js

@@ -97,6 +97,7 @@ export default function QueryBrowser({
       style: styles.emptyContainer,
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.emptyText,
+        testID: "buoy-rq-empty",
         children: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
       })
     });
@@ -111,6 +112,7 @@ export default function QueryBrowser({
     // mutable with stable identity, so `stateSig` carries the changing
     // fields for the row's memo comparison.
     _jsx(FlatList, {
+      testID: "buoy-rq-query-list",
       style: styles.listWrapper,
       contentContainerStyle: contentContainerStyle || styles.listContent,
       data: filteredQueries,
@@ -123,8 +125,13 @@ export default function QueryBrowser({
         isSelected: selectedQuery?.queryHash === query.queryHash,
         onSelect: handleQuerySelect
       }),
-      showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
+      showsVerticalScrollIndicator: true
+      // Clipped cells fail Detox's hittability check even when they are on
+      // screen, so e2e bundles (Metro with EXPO_PUBLIC_E2E=1) turn clipping
+      // off. Inlined at bundle time; a non-inlining bundler keeps prod
+      // behavior.
+      ,
+      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       initialNumToRender: 12,
       maxToRenderPerBatch: 8,
       windowSize: 5,