Fix: Inconsistent product cards #375
jkarenziAnnotations
8 errors and 1 warning
|
Unhandled error:
src/components/home/ProductCard.tsx#L45
TypeError: Cannot read properties of undefined (reading 'substring')
❯ ProductCard src/components/home/ProductCard.tsx:45:30
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7
❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
❯ performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:26135:20
This error originated in "src/__test__/shop.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "fetches and displays products". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Unhandled error:
src/components/home/ProductCard.tsx#L45
TypeError: Cannot read properties of undefined (reading 'substring')
❯ ProductCard src/components/home/ProductCard.tsx:45:30
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7
❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
❯ performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:26135:20
This error originated in "src/__test__/shop.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "filters products based on user input". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
src/__test__/shop.test.tsx > Shop Component > fetches and displays products:
src/__test__/shop.test.tsx#L69
TestingLibraryElementError: Unable to find an element with the text: /Product 1/i. 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 />
</body>
Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
❯ Proxy.waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27
❯ src/__test__/shop.test.tsx:69:11
|
|
src/__test__/shop.test.tsx > Shop Component > filters products based on user input:
src/__test__/shop.test.tsx#L87
TestingLibraryElementError: Unable to find an element with the text: /Product 1/i. 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 />
</body>
Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
❯ Proxy.waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:163:27
❯ src/__test__/shop.test.tsx:87:11
|
|
src/__test__/home/ProductGridFour.test.tsx > ProductGridFour Component > renders the correct product details:
src/__test__/home/ProductGridFour.test.tsx#L172
TestingLibraryElementError: Unable to find an element with the text: Sample Product. 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
class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
>
<div
class="shadow-lg rounded-lg relative"
>
<img
alt="Sample Product"
class="w-full h-48 object-cover rounded-tl-md rounded-tr-md"
src="/src/assets/iphone.png"
/>
<span
class="absolute top-4 right-4 text-white bg-red-600 py-1 px-4 font-thin rounded-xl text-sm"
>
20% Off
</span>
<div
class="p-2 flex flex-col gap-2"
style="font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif;"
>
<div
class="flex justify-between items-center"
>
<h3
class="text-lg font-semibold text-gray-800"
>
Sample Product
...
</h3>
<svg
class="h-8 w-8 text-gray-600 cursor-pointer bg-gray-100 p-1"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 19.654l-.758-.685q-2.448-2.236-4.05-3.828q-1.601-1.593-2.528-2.81t-1.296-2.2T3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.32 0 2.475.675T12 6.289Q12.87 5 14.025 4.325T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 .996-.368 1.98q-.369.986-1.296 2.202t-2.519 2.809q-1.592 1.592-4.06 3.828zm0-1.354q2.4-2.17 3.95-3.716t2.45-2.685t1.25-2.015Q20 9.006 20 8.15q0-1.5-1-2.5t-2.5-1q-1.194 0-2.204.682T12.49 7.385h-.978q-.817-1.39-1.817-2.063q-1-.672-2.194-.672q-1.48 0-2.49 1T4 8.15q0 .856.35 1.734t1.25 2.015t2.45 2.675T12 18.3m0-6.825"
fill="currentColor"
/>
</svg>
</div>
<p
class="text-gray-400 tracking-wide font-light text-sm"
>
This is a sample pro
...
</p>
<div
class="flex items-center gap-2 py-2 w-fit"
>
<div
class="flex items-center font-medium gap-2 relative w-fit"
>
<span
class="text-xl"
>
4.5
</span>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
|
|
src/__test__/home/productCard.test.tsx > ProductCard Component > renders the ProductCard component with product details:
src/__test__/home/productCard.test.tsx#L42
TestingLibraryElementError: Unable to find an element with the text: Sample Product. 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
class="shadow-lg rounded-lg relative"
>
<img
alt="Sample Product"
class="w-full h-48 object-cover rounded-tl-md rounded-tr-md"
src="/iphone.png"
/>
<span
class="absolute top-4 right-4 text-white bg-red-600 py-1 px-4 font-thin rounded-xl text-sm"
>
20% Off
</span>
<div
class="p-2 flex flex-col gap-2"
style="font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif;"
>
<div
class="flex justify-between items-center"
>
<h3
class="text-lg font-semibold text-gray-800"
>
Sample Product
...
</h3>
<svg
class="h-8 w-8 text-gray-600 cursor-pointer bg-gray-100 p-1"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 19.654l-.758-.685q-2.448-2.236-4.05-3.828q-1.601-1.593-2.528-2.81t-1.296-2.2T3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.32 0 2.475.675T12 6.289Q12.87 5 14.025 4.325T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 .996-.368 1.98q-.369.986-1.296 2.202t-2.519 2.809q-1.592 1.592-4.06 3.828zm0-1.354q2.4-2.17 3.95-3.716t2.45-2.685t1.25-2.015Q20 9.006 20 8.15q0-1.5-1-2.5t-2.5-1q-1.194 0-2.204.682T12.49 7.385h-.978q-.817-1.39-1.817-2.063q-1-.672-2.194-.672q-1.48 0-2.49 1T4 8.15q0 .856.35 1.734t1.25 2.015t2.45 2.675T12 18.3m0-6.825"
fill="currentColor"
/>
</svg>
</div>
<p
class="text-gray-400 tracking-wide font-light text-sm"
>
This is a sample pro
...
</p>
<div
class="flex items-center gap-2 py-2 w-fit"
>
<div
class="flex items-center font-medium gap-2 relative w-fit"
>
<span
class="text-xl"
>
2.5
</span>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
<div>
<svg
class="h-6 w-6"
data-testid="halfStar"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<lineargradien
|
|
src/__test__/home/productList.test.tsx > ProductsList Component > renders the ProductsList component with products:
src/__test__/home/productList.test.tsx#L91
TestingLibraryElementError: Unable to find an element with the text: Sample Product. 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
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
>
<div
class="shadow-lg rounded-lg relative"
>
<img
alt="Sample Product"
class="w-full h-48 object-cover rounded-tl-md rounded-tr-md"
src="/src/assets/iphone.png"
/>
<span
class="absolute top-4 right-4 text-white bg-red-600 py-1 px-4 font-thin rounded-xl text-sm"
>
20% Off
</span>
<div
class="p-2 flex flex-col gap-2"
style="font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif;"
>
<div
class="flex justify-between items-center"
>
<h3
class="text-lg font-semibold text-gray-800"
>
Sample Product
...
</h3>
<svg
class="h-8 w-8 text-gray-600 cursor-pointer bg-gray-100 p-1"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 19.654l-.758-.685q-2.448-2.236-4.05-3.828q-1.601-1.593-2.528-2.81t-1.296-2.2T3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.32 0 2.475.675T12 6.289Q12.87 5 14.025 4.325T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 .996-.368 1.98q-.369.986-1.296 2.202t-2.519 2.809q-1.592 1.592-4.06 3.828zm0-1.354q2.4-2.17 3.95-3.716t2.45-2.685t1.25-2.015Q20 9.006 20 8.15q0-1.5-1-2.5t-2.5-1q-1.194 0-2.204.682T12.49 7.385h-.978q-.817-1.39-1.817-2.063q-1-.672-2.194-.672q-1.48 0-2.49 1T4 8.15q0 .856.35 1.734t1.25 2.015t2.45 2.675T12 18.3m0-6.825"
fill="currentColor"
/>
</svg>
</div>
<p
class="text-gray-400 tracking-wide font-light text-sm"
>
This is a sample pro
...
</p>
<div
class="flex items-center gap-2 py-2 w-fit"
>
<div
class="flex items-center font-medium gap-2 relative w-fit"
>
<span
class="text-xl"
>
4.5
</span>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
<div
data-testid="ratingStar"
>
<svg
class="h-6 w-6 text-yellow-400"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.287 34.627c-.404 0-.806-.124-1.152-.371L18 28.422l-8.135 5.834a1.97 1.97 0 0 1-2.312-.008a1.971 1.971 0 0 1-.721-2.194l3.034-9.792l-8.062-5.681a1.98 1.98 0 0 1-.708-2.203a1.978 1.978 0 0 1 1.866-1.363L12.947 13l3.179-9.549a1.976 1.976 0 0 1 3.749 0L23 13l10.036.015a1.975 1.975 0 0 1 1.159 3.566l-8.062 5.681l3.034 9.792a1.97 1.97 0 0 1-.72 2.194a1.957 1.957 0 0 1-1.16.379"
fill="currentColor"
/>
</svg>
</div>
|
|
build (20.x)
Process completed with exit code 1.
|
|
build (20.x)
The following actions uses Node.js version which is deprecated and will be forced to run on node20: actions/checkout@v3, actions/setup-node@v3. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|