feat: update cypress, rtl test (pass check chromatic)

Author: hanjung

cypress/e2e/Home.cy.js

@@ -38,6 +38,10 @@ describe('필터', () => {
   it('카테고리를 "Shoes"로 선택할 경우 해당 카테고리 상품만 나타난다', () => {
     cy.findByRole('radio', { name: 'Shoes' }).click();
 
+    // ? 명시적인 로딩 검증 과정 추가
+    cy.findAllByTestId('product-skeleton').should('have.length.greaterThan', 0);
+    cy.findAllByTestId('product-skeleton').should('not.exist');
+
     cy.findAllByTestId('product-card').each($el => {
       cy.wrap($el).findByText('Shoes').should('exist');
     });

cypress/e2e/Purchase.cy.js

@@ -19,15 +19,12 @@ describe('배송 정보', () => {
   });
 
   it('할인 쿠폰을 선택하지 않은 경우 "없음"이 노출되며, 특정 할인 쿠폰을 선택하면 해당 쿠폰의 이름("가입 기념! $5 할인 쿠폰")이 노출된다', () => {
-    cy.get('@shippingList')
-      .eq(2)
-      .findByRole('button', { name: '없음' })
-      .click();
+    cy.get('@shippingList').eq(2).findByText('없음').click();
     cy.findByText('가입 기념! $5 할인 쿠폰').click();
 
     cy.get('@shippingList')
       .eq(2)
-      .findByRole('button', { name: '가입 기념! $5 할인 쿠폰' })
+      .findByText('가입 기념! $5 할인 쿠폰')
       .should('exist');
   });
 
@@ -110,10 +107,7 @@ describe('결제 정보', () => {
   });
 
   it('배송 정보에서 특정 할인 쿠폰을 선택하면 결제 정보에 해당 쿠폰 정보가 노출되며, 결제 금액이 재계산된다', () => {
-    cy.get('@shippingList')
-      .eq(2)
-      .findByRole('button', { name: '없음' })
-      .click();
+    cy.get('@shippingList').eq(2).findByText('없음').click();
     cy.findByText('가입 기념! $5 할인 쿠폰').click();
 
     cy.get('@paymentList').eq(0).findByText('$1,251.00').should('exist');

package.json

@@ -53,15 +53,15 @@
     "@storybook/react-vite": "^9.0.18",
     "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-query-devtools": "^4.29.23",
-    "@testing-library/cypress": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@testing-library/cypress": "^10.0.3",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/ui": "^3.2.4",
-    "chromatic": "^9.1.0",
+    "chromatic": "^13.1.3",
     "concurrently": "8.2.0",
     "cypress": "^12.17.1",
     "cypress-real-events": "^1.11.0",
@@ -87,7 +87,7 @@
     "vitest": "^3.2.4"
   },
   "overrides": {
-    "@testing-library/dom": "^9.0.1"
+    "@testing-library/dom": "^10.0.4"
   },
   "msw": {
     "workerDirectory": "public"

pnpm-lock.yaml

@@ -6,10 +6,10 @@ import fs from 'fs';
 import path from 'path';
 import dotenv from 'dotenv';
 
-import productsJSON from './response/products.json' assert { type: 'json' };
-import categoriesJSON from './response/categories.json' assert { type: 'json' };
-import couponListJSON from './response/couponList.json' assert { type: 'json' };
-import usersJSON from './response/users.json' assert { type: 'json' };
+import productsJSON from './response/products.json' with { type: 'json' };
+import categoriesJSON from './response/categories.json' with { type: 'json' };
+import couponListJSON from './response/couponList.json' with { type: 'json' };
+import usersJSON from './response/users.json' with { type: 'json' };
 
 dotenv.config();
 
@@ -23,7 +23,7 @@ app.use(express.json());
 app.use(cors());
 
 function wait(amount = 0) {
-  return new Promise((resolve) => setTimeout(resolve, amount));
+  return new Promise(resolve => setTimeout(resolve, amount));
 }
 
 function getRandomArbitrary(min, max) {
@@ -40,42 +40,56 @@ function getProductsByCategoryId(products, categoryId) {
   const numberCategoryId = Number(categoryId);
 
   return numberCategoryId > 0 && numberCategoryId < 6
-    ? products.filter((item) => item.category.id === numberCategoryId)
+    ? products.filter(item => item.category.id === numberCategoryId)
     : products;
 }
 
 function getProductsByPrice(products, price) {
-  return price ? products.filter((item) => item.price === Number(price)) : products;
+  return price
+    ? products.filter(item => item.price === Number(price))
+    : products;
 }
 
 function getProductsByPriceRange({ products, minPrice, maxPrice }) {
   const minValue = minPrice ? Number(minPrice) : Number.MIN_SAFE_INTEGER;
   const maxValue = maxPrice ? Number(maxPrice) : Number.MAX_SAFE_INTEGER;
 
-  return products.filter((item) => item.price >= minValue && item.price <= maxValue);
+  return products.filter(
+    item => item.price >= minValue && item.price <= maxValue,
+  );
 }
 
 function getProductsByTitle(products, title) {
-  return title ? products.filter((item) => item.title.includes(title)) : products;
+  return title ? products.filter(item => item.title.includes(title)) : products;
 }
 
 function getFilteredProductsByQuery(products, query) {
-  const productsFilteredByCategoryId = getProductsByCategoryId(products, query.categoryId);
+  const productsFilteredByCategoryId = getProductsByCategoryId(
+    products,
+    query.categoryId,
+  );
   const productsFilteredByPriceRange = getProductsByPriceRange({
     products: productsFilteredByCategoryId,
     minPrice: query.minPrice,
     maxPrice: query.maxPrice,
   });
-  const productsFilteredByPrice = getProductsByPrice(productsFilteredByPriceRange, query.price);
-  const productsFilteredByTitle = getProductsByTitle(productsFilteredByPrice, query.title);
+  const productsFilteredByPrice = getProductsByPrice(
+    productsFilteredByPriceRange,
+    query.price,
+  );
+  const productsFilteredByTitle = getProductsByTitle(
+    productsFilteredByPrice,
+    query.title,
+  );
 
   return productsFilteredByTitle;
 }
 
 function getSliceIndex(products, query) {
   const offset = query.offset ? Number(query.offset) : 0;
   const limit = query.limit ? Number(query.limit) : products.length;
-  const endIndex = offset + limit > products.length ? products.length : offset + limit;
+  const endIndex =
+    offset + limit > products.length ? products.length : offset + limit;
 
   return {
     startIndex: offset,
@@ -89,7 +103,11 @@ const IV_LENGTH = 16; // For AES, this is always 16
 
 function encrypt(text) {
   let iv = crypto.randomBytes(IV_LENGTH);
-  let cipher = crypto.createCipheriv('aes-256-cbc', Buffer.from(SECURITY_KEY), iv);
+  let cipher = crypto.createCipheriv(
+    'aes-256-cbc',
+    Buffer.from(SECURITY_KEY),
+    iv,
+  );
   let encrypted = cipher.update(text);
 
   encrypted = Buffer.concat([encrypted, cipher.final()]);
@@ -101,7 +119,11 @@ function decrypt(text) {
   let textParts = text.split(':');
   let iv = Buffer.from(textParts.shift(), 'hex');
   let encryptedText = Buffer.from(textParts.join(':'), 'hex');
-  let decipher = crypto.createDecipheriv('aes-256-cbc', Buffer.from(SECURITY_KEY), iv);
+  let decipher = crypto.createDecipheriv(
+    'aes-256-cbc',
+    Buffer.from(SECURITY_KEY),
+    iv,
+  );
   let decrypted = decipher.update(encryptedText);
 
   decrypted = Buffer.concat([decrypted, decipher.final()]);
@@ -126,10 +148,14 @@ app.get('/user', (req, res) => {
 
 app.post('/login', (req, res) => {
   const { email, password } = req.body;
-  const result = usersJSON.users.find((user) => user.email === email && user.password === password);
+  const result = usersJSON.users.find(
+    user => user.email === email && user.password === password,
+  );
 
   if (!result) {
-    return res.status(401).send({ errorCode: 401000, message: '정보가 일치하지 않습니다.' });
+    return res
+      .status(401)
+      .send({ errorCode: 401000, message: '정보가 일치하지 않습니다.' });
   }
 
   const cookieConfig = {
@@ -148,27 +174,35 @@ app.post('/users', (req, res) => {
   const { users } = usersJSON;
 
   if (!password.length) {
-    return res
-      .status(400)
-      .send({ field: 'password', errorCode: 400001, message: '패스워드를 입력해주세요!' });
+    return res.status(400).send({
+      field: 'password',
+      errorCode: 400001,
+      message: '패스워드를 입력해주세요!',
+    });
   }
 
   if (!name.length) {
-    return res
-      .status(400)
-      .send({ field: 'name', errorCode: 400002, message: '이메일을 입력해주세요!' });
+    return res.status(400).send({
+      field: 'name',
+      errorCode: 400002,
+      message: '이메일을 입력해주세요!',
+    });
   }
 
   if (!email.length || !EMAIL_PATTERN.test(email)) {
-    return res
-      .status(400)
-      .send({ field: 'email', errorCode: 400003, message: '잘못된 이메일 양식입니다!' });
+    return res.status(400).send({
+      field: 'email',
+      errorCode: 400003,
+      message: '잘못된 이메일 양식입니다!',
+    });
   }
 
-  if (users.find((user) => user.email === email)) {
-    return res
-      .status(400)
-      .send({ field: 'email', errorCode: 400004, message: '이미 존재하는 메일입니다!' });
+  if (users.find(user => user.email === email)) {
+    return res.status(400).send({
+      field: 'email',
+      errorCode: 400004,
+      message: '이미 존재하는 메일입니다!',
+    });
   }
 
   const newUser = { id: users.length + 1, name, email, password };
@@ -238,7 +272,7 @@ app.post('/log', (req, res) => {
   fs.appendFileSync(
     './server/paymentResult.log',
     `LOG[${level}]: userId: ${userId} | date: ${new Date()} | message: ${message}\n`,
-    (error) => {
+    error => {
       throw error;
     },
   );

server/index.js

@@ -9,11 +9,12 @@ it('pageTitle 스냅샷 테스트(toMatchInlineSnapshot)', async () => {
   expect(container).toMatchInlineSnapshot(`
     <div>
       <h1
-        class="MuiTypography-root MuiTypography-h4 css-1lnl64-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-1ci4e74-MuiTypography-root"
       >
         상품 리스트
       </h1>
       <div
+        id="_rht_toaster"
         style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
       />
     </div>

src/pages/cart/components/tests/PageTitle.spec.jsx

@@ -3,11 +3,12 @@
 exports[`pageTitle 스냅샷 테스트(toMatchSnapshot) 1`] = `
 <div>
   <h1
-    class="MuiTypography-root MuiTypography-h4 css-1lnl64-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-h4 css-1ci4e74-MuiTypography-root"
   >
     상품 리스트
   </h1>
   <div
+    id="_rht_toaster"
     style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
   />
 </div>

src/pages/cart/components/tests/__snapshots__/PageTitle.spec.jsx.snap

@@ -10,7 +10,7 @@ import {
 import React from 'react';
 
 const SkeletonProductCard = () => (
-  <Grid size={{ xs: 6, sm: 6, md: 3 }}>
+  <Grid size={{ xs: 6, sm: 6, md: 3 }} data-testid="product-skeleton">
     <Card sx={{ maxWidth: 345 }}>
       <Skeleton variant="rectangular" height="100" />
       <CardContent>

src/pages/home/components/SkeletonProductCard.jsx

@@ -1,5 +1,4 @@
 import { screen } from '@testing-library/react';
-import { vi } from 'node_modules/vitest/dist/index';
 import React from 'react';
 
 import ProductFilter from '@/pages/home/components/ProductFilter';

src/pages/home/components/tests/ProductFilter.spec.jsx

@@ -26,7 +26,12 @@ const CouponListTableRow = () => {
       <TableCell>
         <FormControl fullWidth size="small">
           <InputLabel>쿠폰 리스트</InputLabel>
-          <Select value={selectedValue} label="쿠폰 리스트" onChange={onChange}>
+          <Select
+            value={selectedValue}
+            label="쿠폰 리스트"
+            aria-label="쿠폰 리스트"
+            onChange={onChange}
+          >
             <MenuItem value={NO_COUPON_ID}>없음</MenuItem>
             {couponList.map(({ name, id }) => (
               <MenuItem value={id} key={id}>