[3팀 여진석] Chapter 1-1. 프레임워크 없이 SPA 만들기 #50
Annotations
10 errors
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<button
class="p-2 text-gray-700 hover:text-gray-900 transition-colors"
onclick="window.history.back()"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M15 19l-7-7 7-7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/product/85067212996"
href="/product/85067212996"
>
상품 상세
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
id="product-detail-main"
>
<div>
<nav
class="mb-4"
>
<div
class="flex items-center space-x-2 text-sm text-gray-600"
>
<a
class="hover:text-blue-600 transition-colors"
data-link=""
href="/"
>
홈
</a>
<svg
class="w-4 h-4 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M9 5l7 7-7 7"
stroke-linecap="round"
stroke-linejoin="rou
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/"
href="/"
>
쇼핑몰
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
>
<div
class="mb-4"
id="name-filter-space"
>
<div
class="relative"
>
<input
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
id="search-input"
placeholder="상품명을 검색해보세요..."
type="text"
value=""
/>
<div
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
<div
class="space-y-3"
>
<div
class="space-y-2"
id="category-filter-space"
>
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<button
class="p-2 text-gray-700 hover:text-gray-900 transition-colors"
onclick="window.history.back()"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M15 19l-7-7 7-7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/product/85067212996"
href="/product/85067212996"
>
상품 상세
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
id="product-detail-main"
>
<div>
<nav
class="mb-4"
>
<div
class="flex items-center space-x-2 text-sm text-gray-600"
>
<a
class="hover:text-blue-600 transition-colors"
data-link=""
href="/"
>
홈
</a>
<svg
class="w-4 h-4 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M9 5l7 7-7 7"
stroke-linecap="round"
stroke-linejoin="rou
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/"
href="/"
>
쇼핑몰
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
>
<div
class="mb-4"
id="name-filter-space"
>
<div
class="relative"
>
<input
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
id="search-input"
placeholder="상품명을 검색해보세요..."
type="text"
value=""
/>
<div
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
<div
class="space-y-3"
>
<div
class="space-y-2"
id="category-filter-space"
>
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<button
class="p-2 text-gray-700 hover:text-gray-900 transition-colors"
onclick="window.history.back()"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M15 19l-7-7 7-7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/product/85067212996"
href="/product/85067212996"
>
상품 상세
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
id="product-detail-main"
>
<div />
<div />
</div>
<div
id="related-product-container"
>
<div />
</div>
</main>
<footer
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto py-8 text-center text-gray-500"
>
<p>
© 2025 항해플러스 프론트엔드 쇼핑몰
</p>
</div>
</footer>
</div>
</div>
<div />
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/.pnpm/@testing-library+dom@10.4.0/
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/"
href="/"
>
쇼핑몰
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
>
<div
class="mb-4"
id="name-filter-space"
>
<div
class="relative"
>
<input
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
id="search-input"
placeholder="상품명을 검색해보세요..."
type="text"
value=""
/>
<div
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
<div
class="space-y-3"
>
<div
class="space-y-2"
id="category-filter-space"
>
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/"
href="/"
>
쇼핑몰
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
>
<div
class="mb-4"
id="name-filter-space"
>
<div
class="relative"
>
<input
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
id="search-input"
placeholder="상품명을 검색해보세요..."
type="text"
value=""
/>
<div
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
<div
class="space-y-3"
>
<div
class="space-y-2"
id="category-filter-space"
>
|
|
src/__tests__/cart.test.js#L16
TestingLibraryElementError: Unable to find an element with the text: 장바구니에 추가되었습니다. 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
id="root"
>
<header
class="bg-white shadow-sm sticky top-0 z-40"
>
<div
class="max-w-md mx-auto px-4 py-4"
>
<div
class="flex items-center justify-between"
>
<div
class="flex items-center space-x-3"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link="/"
href="/"
>
쇼핑몰
</a>
</h1>
</div>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
event-id="cart-btn"
id="cart-icon-btn"
>
<div>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</header>
<div>
<main
class="max-w-md mx-auto px-4 py-4"
>
<div
class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4"
>
<div
class="mb-4"
id="name-filter-space"
>
<div
class="relative"
>
<input
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
id="search-input"
placeholder="상품명을 검색해보세요..."
type="text"
value=""
/>
<div
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
<div
class="space-y-3"
>
<div
class="space-y-2"
id="category-filter-space"
>
|
|
src/__tests__/cart.test.js#L77
Error: expect(element).not.toBeInTheDocument()
expected document not to contain element, found <div
class="fixed inset-0 z-50 overflow-y-auto cart-modal cart-modal-overlay"
>
<div
class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4"
>
<div
class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden"
>
<div
class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between"
>
<h2
class="text-lg font-bold text-gray-900 flex items-center"
>
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
장바구니
<span
class="text-sm font-normal text-gray-600 ml-1"
>
(0)
</span>
</h2>
<button
class="text-gray-400 hover:text-gray-600 p-1"
event-id="cart-modal-close-btn"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M6 18L18 6M6 6l12 12"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</div>
<div
class="flex flex-col max-h-[calc(90vh-120px)]"
>
<div
class="flex-1 flex items-center justify-center p-8"
>
<div
class="text-center"
>
<div
class="text-gray-400 mb-4"
>
<svg
class="mx-auto h-12 w-12"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
<h3
class="text-lg font-medium text-gray-900 mb-2"
>
장바구니가 비어있습니다
</h3>
<p
class="text-gray-600"
>
원하는 상품을 담아보세요!
</p>
</div>
</div>
</div>
<div
class="sticky bottom-0 bg-white border-t border-gray-200 p-4"
>
<div
class="flex justify-between items-center mb-4"
>
<span
class="text-lg font-bold text-gray-900"
>
총 금액
</span>
<span
class="text-xl font-bold text-blue-600"
>
0원
</span>
</div>
<div
class=
|
|
src/__tests__/cart.test.js#L57
Error: expect(received).toBeInTheDocument()
received value must be an HTMLElement or an SVGElement.
Received has type: Null
Received has value: null
❯ src/__tests__/cart.test.js:57:25
|
The logs for this run have expired and are no longer available.
Loading