[FE] 컴포넌트 테스트를 추가합니다. #421

src/frontend/package.json

@@ -8,6 +8,7 @@
     "dev": "vite dev",
     "start": "vite",
     "typecheck": "tsc",
+    "test": "vitest",
     "check": "yarn formatter && yarn lint:fix",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint --fix \"src/**/*.{ts,tsx}\"",
@@ -52,6 +53,7 @@
     "@storybook/react-vite": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@tanstack/eslint-plugin-query": "^5.66.1",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^20",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
@@ -65,6 +67,7 @@
     "eslint-plugin-storybook": "^0.11.2",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.14.0",
+    "jsdom": "^26.0.0",
     "msw": "^2.7.1",
     "prettier": "^3.4.2",
     "sharp": "^0.33.5",

src/frontend/src/components/auth-input/auth-input.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import AuthInput from './index'
+
+describe('AuthInput', () => {
+  it('should render', () => {
+    render(<AuthInput label='Email' />)
+
+    const label = screen.getByText('Email')
+    expect(label).not.toBeNull()
+  })
+
+  it('should render error message', () => {
+    render(
+      <AuthInput
+        label='Email'
+        error='Invalid email'
+      />
+    )
+
+    const error = screen.getByText('Invalid email')
+    expect(error).not.toBeNull()
+  })
+
+  it('should render required message', () => {
+    render(
+      <AuthInput
+        label='Email'
+        required
+      />
+    )
+
+    const required = screen.getByText('*')
+    expect(required).not.toBeNull()
+  })
+
+  it('should render input', () => {
+    render(<AuthInput label='Email' />)
+
+    const input = screen.getByRole('textbox')
+    expect(input).not.toBeNull()
+  })
+})

src/frontend/src/components/avatar/avatar.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Avatar from './index'
+
+describe('Avatar', () => {
+  it('should render without avatar url', () => {
+    render(
+      <Avatar
+        name='John Doe'
+        avatarUrl={null}
+        statusColor='red'
+        size='md'
+      />
+    )
+    const img = screen.getByRole('img')
+    expect(img.getAttribute('src')).toBe('/image/common/default-avatar.png')
+  })
+
+  it('should render with avatar url', () => {
+    render(
+      <Avatar
+        name='John Doe'
+        avatarUrl='/homepage/hero-character.png'
+        statusColor='red'
+        size='md'
+      />
+    )
+    const img = screen.getByRole('img')
+    expect(img.getAttribute('src')).toBe('/homepage/hero-character.png')
+  })
+})

src/frontend/src/components/check-box/check-box.spec.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import CheckBox from './index'
+
+describe('CheckBox', () => {
+  const onChange = vi.fn()
+  it('should render', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    expect(checkBox).not.toBeNull()
+  })
+
+  it('should render checked', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={true}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    expect(checkBox).not.toBeNull()
+  })
+
+  it('should render label', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const label = screen.getByText('Checkbox')
+    expect(label).not.toBeNull()
+  })
+
+  it('should call onChange', () => {
+    const onChange = vi.fn()
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    fireEvent.click(checkBox)
+
+    expect(onChange).toHaveBeenCalled()
+  })
+})

src/frontend/src/components/date-input/dete-input.spec.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DateInput from './index'
+
+describe('DateInput', () => {
+  const setDate = vi.fn()
+  it('should render', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+      />
+    )
+
+    const label = screen.getByText('Date')
+    expect(label).not.toBeNull()
+  })
+
+  it('should call setDate', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+      />
+    )
+
+    const selectBoxYear = screen.getAllByRole('combobox')[0]
+    fireEvent.click(selectBoxYear)
+
+    const option1 = screen.getByText('2025')
+    fireEvent.click(option1)
+
+    const selectBoxMonth = screen.getAllByRole('combobox')[1]
+    fireEvent.click(selectBoxMonth)
+
+    const option2 = screen.getByText('1월')
+    fireEvent.click(option2)
+
+    const selectBoxDay = screen.getAllByRole('combobox')[2]
+    fireEvent.click(selectBoxDay)
+
+    const option3 = screen.getByText('30')
+    fireEvent.click(option3)
+
+    expect(setDate).toHaveBeenCalledWith('2025-01-30')
+  })
+
+  it('should render error', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+        error='Error'
+      />
+    )
+
+    const error = screen.getByText('Error')
+    expect(error).not.toBeNull()
+  })
+
+  it('should render required', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+        required
+      />
+    )
+
+    const required = screen.getByText('*')
+    expect(required).not.toBeNull()
+  })
+})

src/frontend/src/components/select-box/index.tsx

@@ -91,10 +91,13 @@ const SelectBox = <T,>({
         </div>
       ) : null}
       <div className='py-2 px-2 flex justify-between'>
-        <div className='text-gray-10 flex max-w-[calc(100%-8px)] items-center mx-1 h-7'>
+        <label
+          htmlFor={label}
+          className='text-gray-10 flex max-w-[calc(100%-8px)] items-center mx-1 h-7'>
           {search ? '' : value ? (value as Option<T>).label : label}
-        </div>
+        </label>
         <input
+          id={label}
           type='text'
           value={search}
           onChange={handleSearch}
@@ -103,6 +106,7 @@ const SelectBox = <T,>({
           {...props}
         />
         <button
+          role='combobox'
           type='button'
           onClick={() => setIsOpen((prev) => !prev)}
           className={cn(

src/frontend/src/components/select-box/select-box.spec.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import SelectBox from './index'
+
+describe('SelectBox', () => {
+  it('should select option when clicked', async () => {
+    const options = [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' }
+    ]
+    const onChange = vi.fn()
+
+    render(
+      <SelectBox
+        label='Select an option'
+        options={options}
+        value={null}
+        onChange={onChange}
+      />
+    )
+
+    const selectBox = screen.getByRole('combobox')
+    fireEvent.click(selectBox)
+
+    const option1 = screen.getByText('Option 1')
+    fireEvent.click(option1)
+
+    expect(onChange).toHaveBeenCalledWith(options[0])
+  })
+
+  it('should render label', () => {
+    const onChange = vi.fn()
+    render(
+      <SelectBox
+        label='Select an option'
+        options={[]}
+        value={null}
+        onChange={onChange}
+      />
+    )
+
+    const label = screen.getByText('Select an option')
+    expect(label).not.toBeNull()
+  })
+})

src/frontend/src/components/volume-slider/volume-slider.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import VolumeSlider from './index'
+
+describe('VolumeSlider', () => {
+  it('should render', () => {
+    render(<VolumeSlider />)
+
+    const volumeSlider = screen.getByRole('slider')
+    expect(volumeSlider).not.toBeNull()
+  })
+
+  it('should render label', () => {
+    render(<VolumeSlider label='Volume' />)
+
+    const label = screen.getByLabelText('Volume')
+    expect(label).not.toBeNull()
+  })
+})

src/frontend/src/hooks/use-singaling.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 import { TURN_SERVER_URL } from '@/constants/env'
-import { useSignalingSocket } from '@/stores/use-signaling-socket'
+import { useSignalingSocket } from '@/stores/use-signaling-store'
 import { useUserStatus } from '@/stores/use-user-status-store'
 
 import useGetSelfUser from './queries/user/useGetSelfUser'

src/frontend/src/layouts/main-layout/index.tsx

@@ -12,7 +12,7 @@ import useGetSelfUser from '@/hooks/queries/user/useGetSelfUser'
 import { useChattingStomp } from '@/hooks/use-chatting-stomp'
 import { useMediaSettingsStore } from '@/stores/use-media-setting.store'
 import { useServerUnreadStore } from '@/stores/use-server-unread-store'
-import { useSignalingSocket } from '@/stores/use-signaling-socket'
+import { useSignalingSocket } from '@/stores/use-signaling-store'
 
 import ProfileCard from './components/profile-card'
 import ProfileStatusButton from './components/profile-status-button'