fix: jest 컴포넌트 랜더링 시 ThemeProvider를 제공하도록 수정

기존 render함수를 래핑한 renderWithTheme 함수 추가 및 적용

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');

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();
 

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;