[3팀 장루빈] Chapter 1-1. 프레임워크 없이 SPA 만들기 #57
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
|
src/__tests__/cart.test.js#L87
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:87:21
|
|
src/__tests__/cart.test.js#L73
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:73:21
|
|
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
|
|
src/__tests__/cart.test.js#L44
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"
>
<div
class="bg-gray-50"
>
<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"
>
<h1
class="text-xl font-bold text-gray-900"
>
<a
data-link=""
href="/"
>
쇼핑몰
</a>
</h1>
<div
class="flex items-center space-x-2"
>
<button
class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors"
id="cart-icon-btn"
>
<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>
<span
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
>
4
</span>
</button>
</div>
</div>
</div>
</header>
<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"
>
<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"
>
|
The logs for this run have expired and are no longer available.
Loading