From a5aa32b28fd820e0f63e39c79d76f7bae78c35c0 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 27 Jul 2023 17:08:30 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20jest=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=9E=9C=EB=8D=94=EB=A7=81=20=EC=8B=9C=20ThemeProv?=
 =?UTF-8?q?ider=EB=A5=BC=20=EC=A0=9C=EA=B3=B5=ED=95=98=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존 render함수를 래핑한 renderWithTheme 함수 추가 및 적용
---
 .../IntervalInput/IntervalInput.test.tsx           | 11 ++++++-----
 frontend/src/components/Modal/Modal.test.tsx       | 11 ++++++-----
 frontend/src/utils/renderWithTheme.tsx             | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/utils/renderWithTheme.tsx

diff --git a/frontend/src/components/IntervalInput/IntervalInput.test.tsx b/frontend/src/components/IntervalInput/IntervalInput.test.tsx
index 66962e933..2adc5f99c 100644
--- a/frontend/src/components/IntervalInput/IntervalInput.test.tsx
+++ b/frontend/src/components/IntervalInput/IntervalInput.test.tsx
@@ -1,6 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
+import renderWithTheme from '@/utils/renderWithTheme';
 import useKillingPartInterval from '../KillingPartToggleGroup/hooks/useKillingPartInterval';
 import IntervalInput from './IntervalInput';
 import type { TimeMinSec } from './IntervalInput.type';
@@ -38,14 +39,14 @@ describe('<IntervalInput /> 컴포넌트 테스트', () => {
   // 3분 30초
 
   test('4개의 input이 모두 그려진다.', () => {
-    render(<TestIntervalInput />);
+    renderWithTheme(<TestIntervalInput />);
     const inputs = screen.getAllByRole('textbox');
 
     expect(inputs).toHaveLength(4);
   });
 
   test('start 2분 10초면, end는 2분 20초다. ', () => {
-    render(<TestIntervalInput />);
+    renderWithTheme(<TestIntervalInput />);
     const [startMin, startSec, endMin, endSec] = screen.getAllByRole<HTMLInputElement>('textbox');
 
     fireEvent.change(startMin, { target: { value: '2' } });
@@ -56,7 +57,7 @@ describe('<IntervalInput /> 컴포넌트 테스트', () => {
   });
 
   test('start 1분 55초면, end는 2분 5초다. ', () => {
-    render(<TestIntervalInput />);
+    renderWithTheme(<TestIntervalInput />);
     const [startMin, startSec, endMin, endSec] = screen.getAllByRole<HTMLInputElement>('textbox');
 
     fireEvent.change(startMin, { target: { value: '1' } });
@@ -69,7 +70,7 @@ describe('<IntervalInput /> 컴포넌트 테스트', () => {
   test('start(3:25)가 노래길이에서 구간길이를 뺀 것(3:20)보다 길면 에러메세지를 띄운다.', async () => {
     const user = userEvent.setup();
 
-    render(<TestIntervalInput />);
+    renderWithTheme(<TestIntervalInput />);
     const [startMin, startSec] = screen.getAllByRole<HTMLInputElement>('textbox').slice(0, 2);
 
     await user.type(startMin, '3');
diff --git a/frontend/src/components/Modal/Modal.test.tsx b/frontend/src/components/Modal/Modal.test.tsx
index 9acce83f5..0f32e8e9f 100644
--- a/frontend/src/components/Modal/Modal.test.tsx
+++ b/frontend/src/components/Modal/Modal.test.tsx
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import renderWithTheme from '@/utils/renderWithTheme';
 import useModal from './hooks/useModal';
 import Modal from './Modal';
 
@@ -27,7 +28,7 @@ describe('Modal 컴포넌트 테스트', () => {
   };
 
   test('openModal로 모달을 열 수 있다.', async () => {
-    render(<RegistrationModal />);
+    renderWithTheme(<RegistrationModal />);
 
     expect(screen.queryByText(/킬링파트에 투표했습니다./)).not.toBeInTheDocument();
 
@@ -37,7 +38,7 @@ describe('Modal 컴포넌트 테스트', () => {
   });
 
   test('closeModal로 모달을 닫을 수 있다.', async () => {
-    render(<RegistrationModal />);
+    renderWithTheme(<RegistrationModal />);
 
     expect(screen.queryByText(/킬링파트에 투표했습니다./)).not.toBeInTheDocument();
 
@@ -51,7 +52,7 @@ describe('Modal 컴포넌트 테스트', () => {
   });
 
   test('백드랍을 클릭하면 모달이 닫힌다.', async () => {
-    render(<RegistrationModal />);
+    renderWithTheme(<RegistrationModal />);
 
     expect(screen.queryByText(/킬링파트에 투표했습니다./)).not.toBeInTheDocument();
 
@@ -66,7 +67,7 @@ describe('Modal 컴포넌트 테스트', () => {
   });
 
   test('esc를 누르면 모달이 닫힌다.', async () => {
-    render(<RegistrationModal />);
+    renderWithTheme(<RegistrationModal />);
 
     expect(screen.queryByText(/킬링파트에 투표했습니다./)).not.toBeInTheDocument();
 
diff --git a/frontend/src/utils/renderWithTheme.tsx b/frontend/src/utils/renderWithTheme.tsx
new file mode 100644
index 000000000..f41447f88
--- /dev/null
+++ b/frontend/src/utils/renderWithTheme.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import theme from '../styles/theme';
+import type { RenderOptions } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);
+
+const renderWithTheme = (ui: React.ReactElement, options?: RenderOptions) =>
+  render(ui, { wrapper: Wrapper, ...options });
+
+export default renderWithTheme;