MeshiTrack/packages/web/test_results.txt

1640 lines
172 KiB
Text
Raw Normal View History

2026-05-19 10:13:40 +09:00
<EFBFBD><EFBFBD>
 RUN  v4.1.2 F:/Coding/MeshiTrack/packages/web
node.exe : stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > loads and displays the list
At line:1 char:1
+ & "C:\nodejs/node.exe" "C:\nodejs/node_modules/npm/bin/npx-cli.js" vi ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (stderr...splays the list:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
Each child in a list should have a unique "key" prop.
Check the render method of `ShoppingListDetailsPage`. See https://react.dev/link/warning-keys for more information.
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > loads and displays the list
TypeError: fetch failed
 at node:internal/deps/undici/undici:16416:13
 at processTicksAndRejections (node:internal/process/task_queues:103:5)
at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
[cause]: AggregateError:
 at internalConnectMultiple (node:net:1134:18)
 at afterConnectMultiple (node:net:1715:7) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
}
}
<00><03><00> src/components/__tests__/ThemeProvider.test.tsx (8 tests) 116ms
<00><03><00> src/app/(dashboard)/medicines/__tests__/page.test.tsx (3 tests) 123ms
<00><03><00> src/components/__tests__/TopBar.test.tsx (4 tests) 277ms
<00><03><00> src/app/(dashboard)/products/__tests__/ImportDialog.test.tsx (11 tests) 359ms
<00><03><00> src/components/__tests__/ui.test.tsx (11 tests) 285ms
<00><03><00> src/app/__tests__/page.test.tsx (2 tests) 254ms
<00><03><00> src/components/__tests__/Sidebar.test.tsx (8 tests) 334ms
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.
<00><03><00> src/app/(dashboard)/medicines/schedule/__tests__/page.test.tsx (14 tests) 408ms
stderr | src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx > ShoppingListsPage >
loads and displays shopping lists
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.
<00><03><00> src/app/(dashboard)/dashboard/__tests__/page.test.tsx (13 tests) 406ms
<00><03><00> src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx (3 tests | 3 failed) 52ms
 %<25> renders loading initially 42ms
 %<25> loads and displays analytics 4ms
 %<25> handles fetch errors gracefully 3ms
<00><03><00> src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx (6 tests) 710ms
<00><03><00> toggles create list modal and submits  319ms
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > toggles an item check
TypeError: fetch failed
 at node:internal/deps/undici/undici:16416:13
 at processTicksAndRejections (node:internal/process/task_queues:103:5)
at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
[cause]: AggregateError:
 at internalConnectMultiple (node:net:1134:18)
 at afterConnectMultiple (node:net:1715:7) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
}
}
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
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
<00><03><00> src/app/(dashboard)/recipes/new/__tests__/page.test.tsx (3 tests) 203ms
<00><03><00> src/app/(dashboard)/recipes/[id]/edit/__tests__/page.test.tsx (4 tests) 283ms
<00><03><00> src/app/(dashboard)/recipes/[id]/__tests__/page.test.tsx (11 tests) 557ms
<00><03><00> src/app/(dashboard)/purchases/__tests__/page.test.tsx (26 tests) 2317ms
<00><03><00> src/app/(dashboard)/stores/__tests__/page.test.tsx (22 tests) 2286ms
<00><03><00> toggles a preset tag and adds a custom tag  445ms
<00><03><00> src/app/(dashboard)/pantry/__tests__/page.test.tsx (15 tests) 801ms
<00><03><00> src/app/(dashboard)/recipes/__tests__/RecipeEditor.test.tsx (9 tests) 831ms
<00><03><00> src/app/(dashboard)/recipes/__tests__/page.test.tsx (22 tests) 885ms
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 <00><03><00> the behavior is
unsupported and could change in a future version.
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > adds a new item to the list
TypeError: fetch failed
 at node:internal/deps/undici/undici:16416:13
 at processTicksAndRejections (node:internal/process/task_queues:103:5)
at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
[cause]: AggregateError:
 at internalConnectMultiple (node:net:1134:18)
 at afterConnectMultiple (node:net:1715:7) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
}
}
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 <00><03><00> the behavior is
unsupported and could change in a future version.
<00><03><00> src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx (18 tests) 979ms
<00><03><00> src/app/(dashboard)/products/__tests__/page.test.tsx (11 tests) 1234ms
<00><03><00> filters by search input with debounce  413ms
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
<00><03><00> src/app/(dashboard)/medicines/__tests__/OrganizerTab.test.tsx (20 tests) 1394ms
<00><03><00> src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx (15 tests) 1432ms
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
<00><03><00> src/app/(dashboard)/products/__tests__/ProductModal.test.tsx (18 tests) 1701ms
<00><03><00> calls onSave with correct data on valid submit  331ms
<00><03><00> src/app/(dashboard)/settings/__tests__/page.test.tsx (20 tests) 3677ms
<00><03><00> allows editing the household name  438ms
<00><03><00> shows error when name update fails  458ms
<00><03><00> shows fallback error when non-Error thrown on name update  372ms
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > completes the trip and syncs to pantry
TypeError: fetch failed
 at node:internal/deps/undici/undici:16416:13
 at processTicksAndRejections (node:internal/process/task_queues:103:5)
at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
[cause]: AggregateError:
 at internalConnectMultiple (node:net:1134:18)
 at afterConnectMultiple (node:net:1715:7) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
}
}
<00><03><00> src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx (14 tests) 2075ms
<00><03><00> creates medicine and refreshes list  515ms
<00><03><00> shows fallback error when non-Error is thrown on create medicine  466ms
<00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx (5 tests | 5 failed) 4140ms
 %<25> renders loading initially 57ms
 %<25> loads and displays the list 1035ms
 %<25> toggles an item check 1019ms
 %<25> adds a new item to the list 1016ms
 %<25> completes the trip and syncs to pantry 1009ms
<00><03><00> src/app/(dashboard)/refills/__tests__/page.test.tsx (26 tests) 3097ms
<00><03><00> src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx (29 tests) 3172ms
<00><03><00> src/app/(dashboard)/medicines/__tests__/RegimensTab.test.tsx (32 tests) 3206ms
<00><03><00> src/app/(dashboard)/medicines/cabinet/__tests__/page.test.tsx (3 tests) 106ms
<00><03><00> src/app/(dashboard)/medicines/organizer/__tests__/page.test.tsx (3 tests) 108ms
<00><03><00> src/app/(dashboard)/medicines/regimens/__tests__/page.test.tsx (3 tests) 106ms
<00><03><00> src/app/(dashboard)/medicines/[id]/__tests__/page.test.tsx (34 tests) 3690ms
<00><03><00> toggles Add Product form  339ms
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles incoming item_updated messages correctly
a"<22><01><00> Connected to shopping list real-time sync: list1
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > broadcasts toggle item messages when connected
a"<22><01><00> Connected to shopping list real-time sync: list1
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles disconnect and reconnect backoff
a"<22><01><00> Connected to shopping list real-time sync: list1
a"<22><01><00> Sync severed: test
a"<22><01><00> Attempting sync handshake reconnect (1/5)...
<00><03><00> src/lib/useShoppingListSync.test.ts (4 tests) 49ms
<00><03><00> src/app/(dashboard)/__tests__/layout.test.tsx (1 test) 54ms
<00><03><00> src/app/(dashboard)/medicines/activity/__tests__/page.test.tsx (3 tests) 94ms
<00><03><00> src/app/(dashboard)/medicines/library/__tests__/page.test.tsx (3 tests) 98ms
<00><03><00> src/lib/__tests__/useApi.test.ts (7 tests) 33ms
<00><03><00> src/app/(dashboard)/__tests__/loading.test.tsx (1 test) 37ms
<00><03><00> src/services/__tests__/api-client.test.ts (14 tests) 28ms
<00><03><00> src/services/__tests__/recipes.test.ts (11 tests) 17ms
<00><03><00> src/services/__tests__/products.test.ts (12 tests) 18ms
<00><03><00> src/services/__tests__/regimens.test.ts (8 tests) 13ms
<00><03><00> src/services/__tests__/refills.test.ts (9 tests) 11ms
<00><03><00> src/services/meal-plans.test.ts (9 tests) 12ms
<00><03><00> src/services/__tests__/organizer.test.ts (7 tests) 8ms
<00><03><00> src/services/__tests__/stores.test.ts (6 tests) 9ms
<00><03><00> src/services/shopping-lists.test.ts (12 tests) 12ms
<00><03><00> src/services/__tests__/pantry.test.ts (13 tests) 16ms
<00><03><00> src/services/__tests__/cabinet.test.ts (11 tests) 14ms
<00><03><00> src/services/__tests__/households.test.ts (5 tests) 9ms
<00><03><00> src/services/prices.test.ts (5 tests) 10ms
<00><03><00> src/services/__tests__/medicines.test.ts (12 tests) 14ms
<00><03><00> src/services/nutrition-targets.test.ts (4 tests) 8ms
<00><03><00> src/services/__tests__/purchases.test.ts (7 tests) 8ms
<00><03><00> src/services/__tests__/cabinet-events.test.ts (7 tests) 13ms
<00><03><00> src/services/__tests__/medicine-prices.test.ts (7 tests) 10ms
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00> Failed Tests 8 <00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx >
ShoppingListPricesPage > renders loading initially
 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx >
ShoppingListPricesPage > loads and displays analytics
 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx >
ShoppingListPricesPage > handles fetch errors gracefully
Error: invariant expected app router to be mounted
 <00><03><00> useRouter ../../node_modules/next/src/client/components/navigation.ts:179:10
 <00><03><00> PricesAnalyticsPage src/app/(dashboard)/shopping-lists/prices/page.tsx:25:18
 23| export default function PricesAnalyticsPage() {
 24| const { householdId, isLoading } = useApi();
 25| const router = useRouter();
 | ^
 26| const [data, setData] =
useState<any>(null);
 27| const [loading, setLoading] =
useState(true);
 <00><03><00> Object.react_stack_bottom_frame
../../node_modules/react-dom/cjs/react-dom-client.development.js:25904:20
 <00><03><00> renderWithHooks
../../node_modules/react-dom/cjs/react-dom-client.development.js:7662:22
 <00><03><00> updateFunctionComponent
../../node_modules/react-dom/cjs/react-dom-client.development.js:10166:19
 <00><03><00> beginWork ../../node_modules/react-dom/cjs/react-dom-client.development.js:11778:18
 <00><03><00> runWithFiberInDEV
../../node_modules/react-dom/cjs/react-dom-client.development.js:874:13
 <00><03><00> performUnitOfWork
../../node_modules/react-dom/cjs/react-dom-client.development.js:17641:22
 <00><03><00> workLoopSync ../../node_modules/react-dom/cjs/react-dom-client.development.js:17469:41
 <00><03><00> renderRootSync
../../node_modules/react-dom/cjs/react-dom-client.development.js:17450:11
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[1/8]<00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > renders loading initially
TestingLibraryElementError: Unable to find an element with the text: Shopping List. 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;"
>
Hydrating session checklist...
</div>
</div>
</body>
 <00><03><00> Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19
 <00><03><00> ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 <00><03><00> ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 <00><03><00> ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 <00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:48:19
 46| vi.mocked(useApiModule.useApi).mockReturnValue({ householdId: null<00><03><00>
 47| render(<ShoppingListDetailPage />);
 48| expect(screen.getByText('Shopping
List')).toBeInTheDocument();
 | ^
 49| });
 50|
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[2/8]<00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > loads and displays the list
TestingLibraryElementError: Unable to find an element with the text: Apple. 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;"
>
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
style="border: medium; background: transparent; cursor: pointer; padding: 6px;
color: var(--ink-muted); opacity: 0.5;"
>
<svg
aria-hidden="true"
...
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
...
 <00><03><00> Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 <00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:53:11
 51| it('loads and displays the list', async () => {
 52| render(<ShoppingListDetailPage />);
 53| await waitFor(() => {
 | ^
 54| expect(screen.getByText('Test
List')).toBeInTheDocument();
 55| expect(screen.getByText('Apple')).toBeI
nTheDocument();
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[3/8]<00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > toggles an item check
TestingLibraryElementError: Unable to find an element with the text: Apple. 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;"
>
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
style="border: medium; background: transparent; cursor: pointer; padding: 6px;
color: var(--ink-muted); opacity: 0.5;"
>
<svg
aria-hidden="true"
...
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
...
 <00><03><00> Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 <00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:61:11
 59| it('toggles an item check', async () => {
 60| render(<ShoppingListDetailPage />);
 61| await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc<00><03><00>
 | ^
 62|
 63| const checkboxes =
screen.getAllByRole('checkbox');
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[4/8]<00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > adds a new item to the list
TestingLibraryElementError: Unable to find an element with the text: Apple. 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;"
>
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
style="border: medium; background: transparent; cursor: pointer; padding: 6px;
color: var(--ink-muted); opacity: 0.5;"
>
<svg
aria-hidden="true"
...
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
...
 <00><03><00> Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 <00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:80:11
 78|
 79| render(<ShoppingListDetailPage />);
 80| await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc<00><03><00>
 | ^
 81|
 82| const toggleBtn = screen.getByRole('button', { name: /Add Product/<00><03><00>
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[5/8]<00><03><00>
 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx >
ShoppingListDetailPage > completes the trip and syncs to pantry
TestingLibraryElementError: Unable to find an element with the text: Apple. 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;"
>
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
style="border: medium; background: transparent; cursor: pointer; padding: 6px;
color: var(--ink-muted); opacity: 0.5;"
>
<svg
aria-hidden="true"
...
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
 Test Files  2 failed | 56 passed (58)
 Tests  8 failed | 616 passed (624)
 Start at  08:46:48
 Duration  14.56s (transform 14.63s, setup 38.02s, import 35.85s, tests 42.20s, environment 273.62s)
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
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);"
>
Ingredient Loading...
</div>
<div
style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px;
margin-top: 2px;"
>
<span>
Qty: 
5
 
</span>
</div>
</div>
<button
...
 <00><03><00> Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 <00><03><00> src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:91:11
 89|
 90| render(<ShoppingListDetailPage />);
 91| await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc<00><03><00>
 | ^
 92|
 93| const finishBtn = screen.getByRole('button', { name: /Finish Trip/<00><03><00>
<00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00><00><03><00>[6/8]<00><03><00>