🧩 13. Jotai 테스팅 & DevTools 실전

// atoms/user.ts
export const userAtom = atom<User | null>(null)
 
// 문제가 되는 테스트 패턴
describe('StudyCard', () => {
  test('로그인 유저는 좋아요 버튼을 볼 수 있다', () => {
    // 테스트 A에서 userAtom 에 '영호' 를 set
    // 🐣 영철: "이 테스트만 단독으로 보면 완벽한데요..."
    store.set(userAtom, { name: '영호', role: 'admin' })
    // ... 테스트 실행 ...
    // ❌ 테스트 끝나도 atom 정리 안 됨
  })
 
  test('비로그인 유저는 좋아요 버튼을 볼 수 없다', () => {
    // 테스트 B — 이전 테스트의 '영호' 가 atom 에 남아있음!
    // 🐣 영철: "userAtom 이 null 이어야 하는데 '영호' 가 나와요..."
    const user = store.get(userAtom) // '영호'!!
    // 테스트 실패 💥
  })
})

import { createStore } from 'jotai'
import { userAtom, studyListAtom } from '@/atoms'
 
describe('StudyCard', () => {
  // 각 테스트마다 새 store 인스턴스 생성
  let store: ReturnType<typeof createStore>
 
  beforeEach(() => {
    // 🦁 영호: "beforeEach 마다 createStore() 를 호출하면
    //          각 테스트는 완전히 빈 store 에서 시작해요"
    store = createStore()
  })
 
  // afterEach 에서 cleanup 을 따로 할 필요 없음
  // store 변수가 다음 beforeEach 에서 새 인스턴스로 교체되니까
 
  test('로그인 유저는 좋아요 버튼을 볼 수 있다', () => {
    // 이 테스트만의 독립 store 에 설정
    store.set(userAtom, { name: '영호', role: 'admin' })
    // ... 테스트 ...
    // store 는 이 테스트만의 것 — 다음 테스트에 영향 없음
  })
 
  test('비로그인 유저는 좋아요 버튼을 볼 수 없다', () => {
    // store = 완전히 새 인스턴스 — 이전 테스트와 무관
    // 🐣 영철: "아! beforeEach 에서 createStore() 를 호출하니까 항상 깨끗하게 시작하네요!"
    const user = store.get(userAtom) // null ✅
    // 테스트 통과
  })
})

import { createStore, atom } from 'jotai'
 
// derived atom 테스트 — 컴포넌트 없이도 가능
const countAtom = atom(0)
const doubledAtom = atom((get) => get(countAtom) * 2)
 
test('doubledAtom 은 countAtom 의 두 배를 반환한다', () => {
  const store = createStore()
 
  store.set(countAtom, 5)
  expect(store.get(doubledAtom)).toBe(10) // ✅
 
  store.set(countAtom, 100)
  expect(store.get(doubledAtom)).toBe(200) // ✅
})
 
// async atom 테스트
const asyncDataAtom = atom(async () => {
  const res = await fetch('/api/studies')
  return res.json()
})
 
test('asyncDataAtom 은 스터디 목록을 반환한다', async () => {
  // fetch 를 mock 처리
  global.fetch = jest.fn().mockResolvedValue({
    json: () => Promise.resolve([{ id: '1', title: '테스트 스터디' }]),
  })
 
  const store = createStore()
  const data = await store.get(asyncDataAtom)
  expect(data).toHaveLength(1)
  expect(data[0].title).toBe('테스트 스터디')
})

// test/utils.tsx — 테스트 유틸리티
import React, { type ReactElement } from 'react'
import { render, type RenderOptions } from '@testing-library/react'
import { Provider, createStore } from 'jotai'
 
type Store = ReturnType<typeof createStore>
 
interface RenderWithStoreOptions extends Omit<RenderOptions, 'wrapper'> {
  store?: Store
}
 
// 🦁 영호: "이 헬퍼 함수를 만들어두면 모든 테스트에서 재사용할 수 있어요"
export function renderWithStore(
  ui: ReactElement,
  { store = createStore(), ...options }: RenderWithStoreOptions = {},
) {
  function Wrapper({ children }: { children: React.ReactNode }) {
    return <Provider store={store}>{children}</Provider>
  }
 
  return {
    store, // store 를 반환해서 테스트에서 접근 가능
    ...render(ui, { wrapper: Wrapper, ...options }),
  }
}
 
// useHydrateAtoms 를 이용한 초기값 주입 패턴 (공식 레퍼런스 방식)
import { useHydrateAtoms } from 'jotai/utils'
import type { Atom } from 'jotai'
 
type InitialValues = Iterable<readonly [Atom<unknown>, unknown]>
 
function HydrateAtoms({
  initialValues,
  children,
}: {
  initialValues: InitialValues
  children: React.ReactNode
}) {
  useHydrateAtoms(initialValues)
  return <>{children}</>
}
 
export function TestProvider({
  initialValues,
  children,
}: {
  initialValues: InitialValues
  children: React.ReactNode
}) {
  return (
    <Provider>
      <HydrateAtoms initialValues={initialValues}>
        {children}
      </HydrateAtoms>
    </Provider>
  )
}

// atoms/index.ts
export const userAtom = atom<User | null>(null)
export const studyListAtom = atom<Study[]>([])
export const isAdminAtom = atom((get) => get(userAtom)?.role === 'admin')
 
// tests/StudyCard.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { StudyCard } from '@/components/StudyCard'
import { userAtom, studyListAtom } from '@/atoms'
import { renderWithStore } from '../utils'
 
const mockStudy: Study = {
  id: 'study-1',
  title: 'React 심화 스터디',
  likeCount: 42,
  authorId: 'user-영호',
}
 
describe('StudyCard', () => {
  // 시나리오 1: 비로그인 유저
  test('비로그인 유저는 좋아요 버튼이 비활성화된다', () => {
    const { store } = renderWithStore(<StudyCard study={mockStudy} />)
    // userAtom 기본값 = null (비로그인)
    // store.set 을 호출하지 않으면 atom 의 initialValue 사용
 
    const likeButton = screen.getByRole('button', { name: /좋아요/i })
    expect(likeButton).toBeDisabled()
  })
 
  // 시나리오 2: 일반 로그인 유저
  test('로그인 유저는 좋아요 버튼을 클릭할 수 있다', async () => {
    const { store } = renderWithStore(<StudyCard study={mockStudy} />)
 
    // 🦁 영호: "store.set 으로 특정 시나리오의 초기 상태를 설정해요"
    store.set(userAtom, { id: 'user-영철', name: '영철', role: 'member' })
 
    const likeButton = screen.getByRole('button', { name: /좋아요/i })
    expect(likeButton).toBeEnabled()
 
    await userEvent.click(likeButton)
    // 좋아요 수 증가 확인
    expect(screen.getByText('43')).toBeInTheDocument()
  })
 
  // 시나리오 3: 어드민 유저
  test('어드민 유저는 삭제 버튼을 볼 수 있다', () => {
    const { store } = renderWithStore(<StudyCard study={mockStudy} />)
 
    store.set(userAtom, { id: 'user-영호', name: '영호', role: 'admin' })
 
    // isAdminAtom = true (userAtom 에서 파생)
    expect(screen.getByRole('button', { name: /삭제/i })).toBeInTheDocument()
  })
 
  // 시나리오 4: 작성자 본인
  test('작성자 본인은 수정 버튼을 볼 수 있다', () => {
    const { store } = renderWithStore(<StudyCard study={mockStudy} />)
 
    // authorId 가 'user-영호' 인 스터디에서 영호로 로그인
    store.set(userAtom, { id: 'user-영호', name: '영호', role: 'member' })
 
    expect(screen.getByRole('button', { name: /수정/i })).toBeInTheDocument()
  })
})

// useHydrateAtoms 패턴 사용 — 더 선언적
test('로그인 유저는 좋아요 버튼을 클릭할 수 있다', () => {
  const mockUser = { id: 'user-영철', name: '영철', role: 'member' as const }
 
  render(
    <TestProvider initialValues={[[userAtom, mockUser]]}>
      <StudyCard study={mockStudy} />
    </TestProvider>
  )
 
  expect(screen.getByRole('button', { name: /좋아요/i })).toBeEnabled()
})

// components/StudyList.tsx
'use client'
 
import { useAtomValue, useAtom } from 'jotai'
import { studyListAtom, studyFiltersAtom } from '@/atoms'
 
export function StudyList() {
  const studies = useAtomValue(studyListAtom)
  const [filters, setFilters] = useAtom(studyFiltersAtom)
 
  const filtered = studies.filter(
    (s) => filters.category === 'all' || s.category === filters.category
  )
 
  return (
    <div>
      <select
        aria-label="카테고리 필터"
        value={filters.category}
        onChange={(e) => setFilters((prev) => ({ ...prev, category: e.target.value }))}
      >
        <option value="all">전체</option>
        <option value="frontend">프론트엔드</option>
        <option value="backend">백엔드</option>
      </select>
      <ul>
        {filtered.map((study) => (
          <li key={study.id}>{study.title}</li>
        ))}
      </ul>
    </div>
  )
}

// tests/StudyList.test.tsx — 완전한 통합 테스트
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { StudyList } from '@/components/StudyList'
import { studyListAtom, studyFiltersAtom } from '@/atoms'
import { renderWithStore } from '../utils'
 
const mockStudies: Study[] = [
  { id: '1', title: 'React 심화 스터디', category: 'frontend', likeCount: 42 },
  { id: '2', title: 'Node.js 마스터', category: 'backend', likeCount: 30 },
  { id: '3', title: 'TypeScript 완전정복', category: 'frontend', likeCount: 15 },
]
 
describe('StudyList', () => {
  test('전체 필터에서 모든 스터디가 보인다', () => {
    const { store } = renderWithStore(<StudyList />)
    store.set(studyListAtom, mockStudies)
 
    // 3개 모두 렌더되어야 함
    expect(screen.getByText('React 심화 스터디')).toBeInTheDocument()
    expect(screen.getByText('Node.js 마스터')).toBeInTheDocument()
    expect(screen.getByText('TypeScript 완전정복')).toBeInTheDocument()
  })
 
  test('프론트엔드 필터 선택 시 프론트엔드 스터디만 보인다', async () => {
    const user = userEvent.setup()
    const { store } = renderWithStore(<StudyList />)
    store.set(studyListAtom, mockStudies)
 
    // 카테고리 필터 변경
    await user.selectOptions(
      screen.getByRole('combobox', { name: /카테고리 필터/i }),
      'frontend'
    )
 
    // 프론트엔드만 보여야 함
    expect(screen.getByText('React 심화 스터디')).toBeInTheDocument()
    expect(screen.queryByText('Node.js 마스터')).not.toBeInTheDocument() // 백엔드 → 숨겨짐
    expect(screen.getByText('TypeScript 완전정복')).toBeInTheDocument()
  })
 
  test('초기 필터가 백엔드로 설정되어 있으면 백엔드 스터디만 보인다', () => {
    const { store } = renderWithStore(<StudyList />)
 
    // 🦁 영호: "store.set 으로 초기 필터 상태도 설정할 수 있어요"
    store.set(studyListAtom, mockStudies)
    store.set(studyFiltersAtom, { category: 'backend', sortBy: 'latest' })
 
    expect(screen.getByText('Node.js 마스터')).toBeInTheDocument()
    expect(screen.queryByText('React 심화 스터디')).not.toBeInTheDocument()
  })
 
  test('스터디 목록이 비어있으면 빈 상태 메시지를 보여준다', () => {
    const { store } = renderWithStore(<StudyList />)
    store.set(studyListAtom, []) // 빈 목록
 
    expect(screen.getByText('등록된 스터디가 없습니다')).toBeInTheDocument()
  })
})

npm install jotai-devtools

// app/providers.tsx — DevTools 통합
'use client'
 
import { Provider } from 'jotai'
import { DevTools } from 'jotai-devtools'
import 'jotai-devtools/styles.css'
 
export function JotaiProvider({ children }: { children: React.ReactNode }) {
  return (
    <Provider>
      {/*
        DevTools 는 process.env.NODE_ENV !== 'production' 환경에서만 렌더됨
        프로덕션 빌드에서 자동 tree-shake 됨
      */}
      <DevTools
        isInitialOpen={false}     // 처음에 닫힌 상태로
        theme="dark"              // 다크 테마
        position="bottom-right"  // 우측 하단
      />
      {children}
    </Provider>
  )
}

// createStore 를 직접 사용할 때 DevTools 에 같은 store 를 넘겨야 해
'use client'
 
import { Provider, createStore } from 'jotai'
import { DevTools } from 'jotai-devtools'
import 'jotai-devtools/styles.css'
import { useRef } from 'react'
 
export function JotaiProvider({ children }: { children: React.ReactNode }) {
  const storeRef = useRef<ReturnType<typeof createStore>>()
  if (!storeRef.current) {
    storeRef.current = createStore()
  }
 
  return (
    <Provider store={storeRef.current}>
      {/* store prop 을 Provider 와 동일하게 맞춰줘야 함 */}
      <DevTools store={storeRef.current} />
      {children}
    </Provider>
  )
}

// 🦁 영호: "Redux DevTools 확장을 사용한다면 useAtomsDevtools 가 모든 atom 을 보여줘요"
'use client'
 
import { useAtomsDevtools } from 'jotai-devtools/utils'
 
// Provider 하위의 컴포넌트에서 사용
function AtomsDevtools({ children }: { children: React.ReactNode }) {
  // 모든 atom 을 Redux DevTools 의 '영수네앱' 인스턴스에서 추적
  useAtomsDevtools('영수네앱')
  return <>{children}</>
}
 
export function JotaiProvider({ children }: { children: React.ReactNode }) {
  return (
    <Provider>
      <AtomsDevtools>
        {children}
      </AtomsDevtools>
    </Provider>
  )
}

// 🐣 영철: "DevTools 에서 atom1, atom2, atom3 으로 나와서 뭐가 뭔지 모르겠어요"
 
// ❌ debugLabel 없을 때
const userAtom = atom<User | null>(null)
const studyListAtom = atom<Study[]>([])
// DevTools: atom1, atom2 (알아보기 어려움)
 
// ✅ debugLabel 추가
const userAtom = atom<User | null>(null)
userAtom.debugLabel = 'userAtom'
 
const studyListAtom = atom<Study[]>([])
studyListAtom.debugLabel = 'studyListAtom'
// DevTools: userAtom, studyListAtom (명확하게 보임)

// debugLabel 이 있으면 에러 메시지도 더 명확해져
// ❌ debugLabel 없음: "atom1 에서 예상치 못한 값"
// ✅ debugLabel 있음: "userAtom 에서 예상치 못한 값"
 
// 실제 테스트 에러 시나리오
test('userAtom 초기값은 null 이다', () => {
  const store = createStore()
  const user = store.get(userAtom)
  // expect(user).toBe(null) 실패 시:
  // "Expected: null, Received: { name: '영철' }" + atom 이름이 표시되면 훨씬 파악이 쉬워
})

// next.config.js — 이미 설정했다면 생략
experimental: {
  swcPlugins: [
    ['@swc-jotai/debug-label', {}], // 모든 atom 에 자동으로 debugLabel 추가
  ],
},

// 🦁 영호: "React DevTools 에서 atom 값을 확인하고 싶으면 이걸 써요"
import { useAtomsDebugValue } from 'jotai-devtools/utils'
 
// Provider 하위 아무 컴포넌트에서나 사용
function DebugAtoms() {
  useAtomsDebugValue() // React DevTools 의 Hooks 탭에서 모든 atom 값 확인 가능
  return null
}
 
// 앱 루트에 추가
function App() {
  return (
    <Provider>
      {process.env.NODE_ENV === 'development' && <DebugAtoms />}
      <MainContent />
    </Provider>
  )
}

beforeEach(() => {
  store = createStore() // ← 매 테스트마다 새 store
})

import { act } from '@testing-library/react'
 
// store.set 도 act 로 감싸면 더 안전
act(() => {
  store.set(countAtom, 5)
})
// 또는 userEvent (자동으로 act 처리)
await userEvent.click(button) // 내부적으로 act 처리

// DevTools 는 자동으로 production 에서 tree-shake 되지만
// 명시적으로 체크해도 좋음
{process.env.NODE_ENV !== 'production' && <DevTools />}