MeshiTrack/packages/web/test_results_2_utf8.txt

 RUN  v4.1.2 F:/Coding/MeshiTrack/packages/web

node.exe : stderr | src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx > 
ShoppingListsPage > loads and displays shopping lists
At line:1 char:1
+ & "C:\nodejs/node.exe" "C:\nodejs/node_modules/npm/bin/npx-cli.js" vi ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (stderr... shopping lists:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
 
Each child in a list should have a unique "key" prop.

Check the render method of `ShoppingListsPage`. See https://react.dev/link/warning-keys for more information.

 Γ£ô src/components/__tests__/ThemeProvider.test.tsx (8 tests) 102ms
 Γ£ô src/app/__tests__/page.test.tsx (2 tests) 198ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/page.test.tsx (3 tests) 136ms
 Γ£ô src/app/(dashboard)/products/__tests__/ImportDialog.test.tsx (11 tests) 353ms
 Γ£ô src/components/__tests__/ui.test.tsx (11 tests) 284ms
stderr | src/app/(dashboard)/dashboard/__tests__/page.test.tsx > DashboardPage > 
shows "good shape" message when no critical alerts
Each child in a list should have a unique "key" prop.

Check the render method of `DashboardPage`. See https://react.dev/link/warning-keys for more information.

 Γ£ô src/components/__tests__/TopBar.test.tsx (4 tests) 331ms
 Γ£ô src/components/__tests__/Sidebar.test.tsx (8 tests) 340ms
 Γ£ô src/app/(dashboard)/dashboard/__tests__/page.test.tsx (13 tests) 401ms
 Γ£ô src/app/(dashboard)/medicines/schedule/__tests__/page.test.tsx (14 tests) 388ms
 Γ£ô src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx (6 tests) 685ms
     Γ£ô toggles create list modal and submits  332ms
stderr | src/app/(dashboard)/refills/__tests__/page.test.tsx > RefillsPage > 
renders Refills heading when householdId exists
An update to AlertsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to AlertsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to RefillListsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to RefillListsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

stderr | src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx > MedicinePricesPage > 
renders Medicine Prices heading when householdId exists
An update to MedicinePricesContent inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to MedicinePricesContent inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/recipes/new/__tests__/page.test.tsx (3 tests) 216ms
 Γ£ô src/app/(dashboard)/recipes/[id]/edit/__tests__/page.test.tsx (4 tests) 285ms
 Γ£ô src/app/(dashboard)/recipes/[id]/__tests__/page.test.tsx (11 tests) 556ms
 Γ£ô src/app/(dashboard)/recipes/__tests__/page.test.tsx (22 tests) 801ms
 Γ£ô src/app/(dashboard)/pantry/__tests__/page.test.tsx (15 tests) 809ms
stderr | src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx > ActivityTab > 
loads more events when Load more is clicked
Encountered two children with the same key, `ev-1`. Keys should be unique so that components maintain their 
identity across updates. Non-unique keys may cause children to be duplicated and/or omitted ΓÇö the behavior is 
unsupported and could change in a future version.

 Γ£ô src/app/(dashboard)/recipes/__tests__/RecipeEditor.test.tsx (9 tests) 891ms
stderr | src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx > MedicinePricesPage > 
shows Load more button in price history
Encountered two children with the same key, `pr-1`. Keys should be unique so that components maintain their 
identity across updates. Non-unique keys may cause children to be duplicated and/or omitted ΓÇö the behavior is 
unsupported and could change in a future version.

 Γ¥» src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx (3 tests | 3 failed) 2108ms
     × renders loading initially 62ms
     × loads and displays analytics 1022ms
     × handles fetch errors gracefully 1020ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx (18 tests) 940ms
 Γ£ô src/app/(dashboard)/stores/__tests__/page.test.tsx (22 tests) 2353ms
     Γ£ô toggles a preset tag and adds a custom tag  491ms
 Γ£ô src/app/(dashboard)/purchases/__tests__/page.test.tsx (26 tests) 2386ms
     Γ£ô adds and removes purchase items  304ms
 Γ£ô src/app/(dashboard)/products/__tests__/page.test.tsx (11 tests) 1243ms
     Γ£ô filters by search input with debounce  442ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/OrganizerTab.test.tsx (20 tests) 1354ms
stderr | src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx > LibraryTab > 
filters medicines by search, category, and form
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx (15 tests) 1433ms
stderr | src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx > CabinetTab > 
changes quantity and unit in AddToCabinetForm
An update to AddToCabinetForm inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/products/__tests__/ProductModal.test.tsx (18 tests) 1767ms
     Γ£ô calls onSave with correct data on valid submit  342ms
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx (5 tests | 4 failed) 4156ms
     Γ£ô renders loading initially 59ms
     × loads and displays the list 1012ms
     × toggles an item check 1047ms
     × adds a new item to the list 1010ms
     × completes the trip and syncs to pantry 1023ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx (14 tests) 2143ms
     Γ£ô creates medicine and refreshes list  495ms
     Γ£ô shows fallback error when non-Error is thrown on create medicine  448ms
 Γ£ô src/app/(dashboard)/settings/__tests__/page.test.tsx (20 tests) 3791ms
     Γ£ô creates a household on form submit  303ms
     Γ£ô allows editing the household name  505ms
     Γ£ô shows error when name update fails  460ms
     Γ£ô shows fallback error when non-Error thrown on name update  324ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/RegimensTab.test.tsx (32 tests) 3041ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx (29 tests) 3127ms
 Γ£ô src/app/(dashboard)/refills/__tests__/page.test.tsx (26 tests) 3150ms
 Γ£ô src/app/(dashboard)/medicines/[id]/__tests__/page.test.tsx (34 tests) 3835ms
     Γ£ô toggles Add Product form  367ms
 Γ£ô src/app/(dashboard)/medicines/organizer/__tests__/page.test.tsx (3 tests) 103ms
 Γ£ô src/app/(dashboard)/medicines/activity/__tests__/page.test.tsx (3 tests) 104ms
 Γ£ô src/lib/__tests__/useApi.test.ts (7 tests) 41ms
 Γ£ô src/app/(dashboard)/medicines/library/__tests__/page.test.tsx (3 tests) 97ms
 Γ£ô src/app/(dashboard)/medicines/regimens/__tests__/page.test.tsx (3 tests) 92ms
 Γ£ô src/app/(dashboard)/medicines/cabinet/__tests__/page.test.tsx (3 tests) 102ms
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles incoming item_updated messages correctly
🛒 Connected to shopping list real-time sync: list1

 Γ£ô src/app/(dashboard)/__tests__/loading.test.tsx (1 test) 37ms
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > broadcasts toggle item messages when connected
🛒 Connected to shopping list real-time sync: list1

stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles disconnect and reconnect backoff
🛒 Connected to shopping list real-time sync: list1
🔌 Sync severed: test
🔄 Attempting sync handshake reconnect (1/5)...

 Γ£ô src/lib/useShoppingListSync.test.ts (4 tests) 44ms
 Γ£ô src/app/(dashboard)/__tests__/layout.test.tsx (1 test) 40ms
 Γ£ô src/services/__tests__/api-client.test.ts (14 tests) 20ms
 Γ£ô src/services/__tests__/products.test.ts (12 tests) 19ms
 Γ£ô src/services/__tests__/organizer.test.ts (7 tests) 12ms
 Γ£ô src/services/meal-plans.test.ts (9 tests) 12ms
 Γ£ô src/services/__tests__/medicines.test.ts (12 tests) 16ms
 Γ£ô src/services/__tests__/regimens.test.ts (8 tests) 12ms
 Γ£ô src/services/__tests__/pantry.test.ts (13 tests) 12ms
 Γ£ô src/services/__tests__/stores.test.ts (6 tests) 12ms
 Γ£ô src/services/__tests__/cabinet-events.test.ts (7 tests) 14ms
 Γ£ô src/services/__tests__/cabinet.test.ts (11 tests) 12ms
 Γ£ô src/services/__tests__/purchases.test.ts (7 tests) 14ms
 Γ£ô src/services/__tests__/refills.test.ts (9 tests) 13ms
 Γ£ô src/services/shopping-lists.test.ts (12 tests) 8ms
 Γ£ô src/services/nutrition-targets.test.ts (4 tests) 8ms
 Γ£ô src/services/prices.test.ts (5 tests) 6ms
 Γ£ô src/services/__tests__/medicine-prices.test.ts (7 tests) 12ms
 Γ£ô src/services/__tests__/recipes.test.ts (11 tests) 12ms
 Γ£ô src/services/__tests__/households.test.ts (5 tests) 7ms

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 7 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > renders loading initially
TestingLibraryElementError: Unable to find an element with the text: Price Intelligence. This could be 
because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to 
make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      style="padding: 40px;"
    >
      Synthesizing financial graphs...
    </div>
  </div>
</body>
 Γ¥» Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 Γ¥» src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx:56:19
     54|     vi.mocked(useApiModule.useApi).mockReturnValue({ householdId: null…
     55|     render(<ShoppingListPricesPage />);
     56|     expect(screen.getByText('Price 
Intelligence')).toBeInTheDocument();
       |                   ^
     57|   });
     58|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > loads and displays analytics
TestingLibraryElementError: Unable to find an element with the text: $150.00. This could be because 
the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make 
your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Inflation & Spend Metrics
    </h1>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="margin-bottom: 24px;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Checklists
        </button>
      </div>
      <div
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 28px; 
margin-bottom: 32px;"
      >
        <div
          class=""
          style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: 
var(--r-md); overflow: hidden; padding: 24px;"
        >
          <h4
            style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
          >
            Monthly Spending Velocities
          </h4>
          <div
            style="height: 300px;"
          >
            <div
              style="display: flex; align-items: center; justify-content: center; height: 100%; color: 
var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
            >
              No historical spend records found.
            </div>
          </div>
        </div>
        <div
          class=""
          style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: 
var(--r-md); overflow: hidden; padding: 24px;"
        >
          <h4
            style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
          >
            Spending Distrubution by Category
          </h4>
          <div
            style="height: 300px;"
          >
            <div
              style="display: flex; align-items: center; justify-content: center; height: 100%; color: 
var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
            >
              No categorized allocations recorded yet.
            </div>
          </div>
        </div>
      </div>
      <div
        class=""
        style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); 
overflow: hidden; padding: 24px;"
      >
        <h4
          style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
        >
          Average Complete Basket Totals per Store
        </h4>
        <div
          style="display: flex; align-items: center; justify-content: center; height: 100%; color: 
var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
        >
          Create multiple shopping trips to visualize basket trends.
        </div>
      </div>
    </div>
  </div>
</body>

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Inflation & Spend Metrics
      </h1>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="margin-bottom: 24px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Checklists
          </button>
        </div>
        <div
          style="display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 28px; 
margin-bottom: 32px;"
        >
          <div
            class=""
            style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: 
var(--r-md); overflow: hidden; padding: 24px;"
          >
            <h4
              style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
            >
              Monthly Spending Velocities
            </h4>
            <div
              style="height: 300px;"
            >
              <div
                style="display: flex; align-items: center; justify-content: center; height: 100%; 
color: var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
              >
                No historical spend records found.
              </div>
            </div>
          </div>
          <div
            class=""
            style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: 
var(--r-md); overflow: hidden; padding: 24px;"
          >
            <h4
              style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
            >
              Spending Distrubution by Category
            </h4>
            <div
              style="height: 300px;"
            >
              <div
                style="display: flex; align-items: center; justify-content: center; height: 100%; 
color: var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
              >
                No categorized allocations recorded yet.
              </div>
            </div>
          </div>
        </div>
        <div
          class=""
          style="background: var(--bg-elev); border: 1px solid var(--border); border-radius: 
var(--r-md); overflow: hidden; padding: 24px;"
        >
          <h4
            style="font-size: 15px; font-weight: 600; margin-bottom: 20px;"
          >
            Average Complete Basket Totals per Store
          </h4>
          <div
            style="display: flex; align-items: center; justify-content: center; height: 100%; color: 
var(--ink-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--r-md);"
          >
            Create multiple shopping trips to visualize basket trends.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx:61:11
     59|   it('loads and displays analytics', async () => {
     60|     render(<ShoppingListPricesPage />);
     61|     await waitFor(() => {
       |           ^
     62|       expect(screen.getByText('$150.00')).toB
eInTheDocument();
     63|       expect(screen.getByText('Costco')).toBe
InTheDocument();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > handles fetch errors gracefully
TestingLibraryElementError: Unable to find an element with the text: Analytics failed. This could be 
because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to 
make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      style="padding: 40px; color: var(--danger);"
    >
      Error: 
      Analytics failed
    </div>
  </div>
</body>

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <div
        style="padding: 40px; color: var(--danger);"
      >
        Error: 
        Analytics failed
      </div>
    </div>
  </body>
</html>
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx:72:11
     70|     render(<ShoppingListPricesPage />);
     71|
     72|     await waitFor(() => {
       |           ^
     73|       expect(screen.getByText('Analytics 
failed')).toBeInTheDocument();
     74|     });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > loads and displays the list
TestingLibraryElementError: Found multiple elements with the text: Apple

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  style="font-weight: 600; font-size: 14px; color: var(--ink);"
>
  Apple
</div>

Ignored nodes: comments, script, style
<option
  value="p1"
>
  Apple
</option>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or 
`findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    aria-label="Toggle check for Apple"
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Apple
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                        pcs
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      aria-label="Toggle check for Apple"
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Apple
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                          pcs
                        </span>
                      </...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:66:11
     64|   it('loads and displays the list', async () => {
     65|     render(<ShoppingListDetailPage />);
     66|     await waitFor(() => {
       |           ^
     67|       expect(screen.getByText('Test 
List')).toBeInTheDocument();
     68|       expect(screen.getByText('Apple')).toBeI
nTheDocument();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > toggles an item check
TestingLibraryElementError: Found multiple elements with the text: Apple

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  style="font-weight: 600; font-size: 14px; color: var(--ink);"
>
  Apple
</div>

Ignored nodes: comments, script, style
<option
  value="p1"
>
  Apple
</option>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or 
`findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    aria-label="Toggle check for Apple"
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Apple
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                        pcs
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      aria-label="Toggle check for Apple"
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Apple
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                          pcs
                        </span>
                      </...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:74:11
     72|   it('toggles an item check', async () => {
     73|     render(<ShoppingListDetailPage />);
     74|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
     75|
     76|     const checkbox = screen.getByRole('button', { name: /Toggle check …

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > adds a new item to the list
TestingLibraryElementError: Found multiple elements with the text: Apple

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  style="font-weight: 600; font-size: 14px; color: var(--ink);"
>
  Apple
</div>

Ignored nodes: comments, script, style
<option
  value="p1"
>
  Apple
</option>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or 
`findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    aria-label="Toggle check for Apple"
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Apple
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                        pcs
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      aria-label="Toggle check for Apple"
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Apple
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                          pcs
                        </span>
                      </...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:92:11
     90|
     91|     render(<ShoppingListDetailPage />);
     92|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
     93|
     94|     const customInput = screen.getByPlaceholderText(/e.g., Generic Flo…

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/7]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > completes the trip and syncs to pantry
TestingLibraryElementError: Found multiple elements with the text: Apple

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  style="font-weight: 600; font-size: 14px; color: var(--ink-muted);"
>
  Apple
</div>

Ignored nodes: comments, script, style
<option
  value="p1"
>
  Apple
</option>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or 
`findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            style="background: var(--success); border-color: var(--success); color: rgb(255, 255, 
255);"
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 7l9-4 9 4v10l-9 4-9-4z"
              />
              <path
                d="M3 7l9 4 9-4M12 11v10"
              />
            </svg>
             Sync 
            1
             items to Pantry
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 0.65; 
text-decoration: l...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path

 Test Files  2 failed | 56 passed (58)
      Tests  7 failed | 617 passed (624)
   Start at  08:48:56
   Duration  14.73s (transform 12.78s, setup 37.91s, import 31.13s, tests 44.48s, environment 281.61s)

                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
              style="background: var(--success); border-color: var(--success); color: rgb(255, 255, 
255);"
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 7l9-4 9 4v10l-9 4-9-4z"
                />
                <path
                  d="M3 7l9 4 9-4M12 11v10"
                />
              </svg>
               Sync 
              1
               items to Pantry
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                [3...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:124:11
    122|
    123|     render(<ShoppingListDetailPage />);
    124|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
    125|
    126|     const syncBtn = screen.getByRole('button', { name: /Sync.*items to…

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[7/7]⎯