From 4780c5ae2697feaa14ddff6c8951a42ef9241377 Mon Sep 17 00:00:00 2001
From: chanwoo7 <chanwoo9987@gmail.com>
Date: Sun, 4 Oct 2026 22:37:47 +0900
Subject: [PATCH] =?UTF-8?q?test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A7=88?=
 =?UTF-8?q?=EB=8B=A4=20sonner=20=EC=A3=BC=EC=9E=85=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EC=8B=9C=ED=8A=B8=EB=A5=BC=20=EA=B1=B7=EC=96=B4=20?=
 =?UTF-8?q?=EC=97=AD=ED=95=A0=20=EC=A1=B0=ED=9A=8C=20=EC=A7=80=EC=97=B0=20?=
 =?UTF-8?q?=ED=95=B4=EC=86=8C,=20=EA=B7=BC=EA=B1=B0=20=EC=97=86=EB=8A=94?=
 =?UTF-8?q?=2015=EC=B4=88=20=EC=97=B0=EC=9E=A5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 원인(계측): sonner가 import 때 97규칙짜리 <style>을 넣고, jsdom은 DOM이 바뀔 때마다 스타일 캐시를 버려 getComputedStyle이 모든 규칙을 다시 대조. 역할·이름 조회는 조회 1회에 getComputedStyle 약 139회
  - CPU 프로파일: 역할 조회 868ms 중 657ms가 jsdom computed-style.js의 규칙 대조
  - 조작 직후 셀 이름 조회 1회 66~68ms → 스타일시트 제거 시 21~23ms(변경 없으면 3.3ms)
- setup.ts beforeEach에서 해당 <style> 제거. 전체 스위트(커버리지, 2회씩) 합계 133~138초 → 99초, 최장 2.5초 → 1.5초, 1초 초과 41~44개 → 21~24개, 실패 0
- banners·notifications 3곳의 15_000 연장 제거(근거 없던 연장, 수정 후 0.7~1.3초)
- 회귀: sonner를 불러와도 테스트 시작 시점 문서에 그 스타일시트가 없다(setup 수정을 되돌리면 실패 확인)
---
 src/features/banners/pages/banners.spec.tsx         |  2 +-
 .../notifications/pages/history-page.spec.tsx       |  2 +-
 src/features/notifications/pages/send-page.spec.tsx |  2 +-
 src/test/infra/sonner-style.spec.ts                 | 12 ++++++++++++
 src/test/setup.ts                                   | 13 ++++++++++++-
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src/test/infra/sonner-style.spec.ts

diff --git a/src/features/banners/pages/banners.spec.tsx b/src/features/banners/pages/banners.spec.tsx
index 85be30e..75e8cac 100644
--- a/src/features/banners/pages/banners.spec.tsx
+++ b/src/features/banners/pages/banners.spec.tsx
@@ -115,7 +115,7 @@ describe('배너', () => {
     await userEvent.click(screen.getByRole('button', { name: '가을 한정 삭제' }));
     await userEvent.click(await screen.findByRole('button', { name: '삭제' }));
     await vi.waitFor(() => expect(deleted).toEqual({ bannerId: '5' }));
-  }, 15_000); // 앱 부팅부터 여러 단계를 한 번에 도는 흐름이라 기본 5초가 빠듯하다
+  });
 
   it('목록을 켜 둔 채 시작 시각이 되면 예약이 노출 중·현재 노출로 바뀐다', async () => {
     // 실제 시간도 흐르게 둬 부팅·요청은 그대로 진행되고, 시작 시각만 앞당겨 넘긴다
diff --git a/src/features/notifications/pages/history-page.spec.tsx b/src/features/notifications/pages/history-page.spec.tsx
index 8a008de..09ea8e8 100644
--- a/src/features/notifications/pages/history-page.spec.tsx
+++ b/src/features/notifications/pages/history-page.spec.tsx
@@ -165,7 +165,7 @@ describe('알림 발송 이력', () => {
         targetKind: null,
       }),
     );
-  }, 15_000); // 앱 부팅부터 여러 단계를 한 번에 도는 흐름이라 기본 5초가 빠듯하다
+  });
 
   it('제목을 누르면 상세 시트에 본문·대상과 받지 못한 계정 ID를 보이고, 닫으면 주소에서 뺀다', async () => {
     boot('/notifications');
diff --git a/src/features/notifications/pages/send-page.spec.tsx b/src/features/notifications/pages/send-page.spec.tsx
index a02a181..172fc9c 100644
--- a/src/features/notifications/pages/send-page.spec.tsx
+++ b/src/features/notifications/pages/send-page.spec.tsx
@@ -191,5 +191,5 @@ describe('알림 보내기', () => {
     );
     expect(screen.getByLabelText('제목')).toHaveValue('');
     expect(screen.queryByRole('alertdialog')).toBeNull();
-  }, 15_000); // 앱 부팅부터 여러 단계를 한 번에 도는 흐름이라 기본 5초가 빠듯하다
+  });
 });
diff --git a/src/test/infra/sonner-style.spec.ts b/src/test/infra/sonner-style.spec.ts
new file mode 100644
index 0000000..616dded
--- /dev/null
+++ b/src/test/infra/sonner-style.spec.ts
@@ -0,0 +1,12 @@
+import { toast } from 'sonner';
+
+/** 테스트 설정(setup.ts)이 sonner의 주입 스타일시트를 걷어내는지 고정한다 — 남으면 조작 직후 역할 조회가 약 3배 느려진다 */
+describe('테스트 환경의 sonner 스타일시트', () => {
+  it('sonner를 불러와도 테스트 시작 시점의 문서에는 토스트 스타일시트가 없다', () => {
+    expect(typeof toast).toBe('function');
+    const injected = [...document.querySelectorAll('style')].filter((el) =>
+      el.textContent?.includes('data-sonner-toaster'),
+    );
+    expect(injected).toHaveLength(0);
+  });
+});
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 970813e..8849785 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/vitest';
 import { cleanup, configure } from '@testing-library/react';
-import { afterAll, afterEach, beforeAll } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach } from 'vitest';
 
 import { installZodKorean } from '@/shared/lib/zod-locale';
 
@@ -32,7 +32,18 @@ proto.setPointerCapture ??= () => undefined;
 proto.releasePointerCapture ??= () => undefined;
 proto.scrollIntoView ??= () => undefined;
 
+/** sonner가 import될 때 문서에 넣는 토스트 스타일시트를 찾는 표식 */
+const SONNER_STYLE_MARKER = 'data-sonner-toaster';
+
 beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+// sonner는 import 시점에 97규칙짜리 <style>을 넣는다. jsdom은 DOM이 바뀔 때마다 스타일 캐시를 버리고
+// getComputedStyle에서 문서의 모든 규칙을 다시 대조하는데, 역할·이름 조회가 조회 1회에 이를 100번 넘게 부른다.
+// 조작 직후 조회가 66ms → 22ms, 전체 스위트(커버리지) 합계 135초 → 99초. jsdom에서 토스트 CSS는 쓸 데가 없다
+beforeEach(() => {
+  document.querySelectorAll('style').forEach((el) => {
+    if (el.textContent?.includes(SONNER_STYLE_MARKER)) el.remove();
+  });
+});
 afterEach(() => {
   server.resetHandlers();
   cleanup();