Fix: Inconsistent product cards #375
Annotations
8 errors and 1 warning
|
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.
|
|
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#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#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#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#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#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>
|
|
|
|
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/
|
This job failed
Loading