최근에 테스트 코드에 대해서 공부해보면서 테스트하기 좋은 코드가 잘 설계된 코드라는걸 배웠다.
그래서 지금까지 중구난방 작성된 코드들을 점검하고 리팩토링(클로드가ㅎ) 해봤다.

리팩토링 내용

요약

• 전투 로직 분리 : BattleField.tsx -> battle.ts (다른 글에서 다룬다)
• 레벨업 로직 분리 : useGameStore.ts -> battle.ts (다른 글에서 다룬다)
• storage 추상화 계층 추가 : storage.ts 파일 추가
• encounter 의존성 주입 : encounter.ts

encounter 의존성 주입

// before
export function checkEncounter(): boolean {
  const { incrementStepCount, incrementTotalEncounters, setEncounteredPkmon } =
    useGameStore.getState(); // 타이트 커플링, Store에 직접 의존중

  incrementStepCount();

  const shouldEncounter = Math.random() < 1 / ENCOUNTER_RATE; // 타이트 커플링

  if (shouldEncounter) {
    incrementTotalEncounters();
    const wildPkmon = generateRandomPkmon();
    setEncounteredPkmon(wildPkmon);
    console.log("[Encounter] Wild Pkmon appeared!", wildPkmon);
  }

  return shouldEncounter;
}

// after
export function checkEncounter(
  actions?: EncounterActions,
  encounterRate: number = ENCOUNTER_RATE,
  randomFn: () => number = Math.random
): boolean {
  // actions가 없으면 실제 store 사용 (기본 동작)
  const { incrementStepCount, incrementTotalEncounters, setEncounteredPkmon } =
    actions || useGameStore.getState(); // 테스트시에는 action 인자를 넣어 검증 가능 

  incrementStepCount();

  const shouldEncounter = shouldTriggerEncounter(encounterRate, randomFn);

  if (shouldEncounter) {
    incrementTotalEncounters();
    const wildPkmon = generateRandomPkmon(PKMON_SPECIES, randomFn);
    setEncounteredPkmon(wildPkmon);
    console.log("[Encounter] Wild Pkmon appeared!", wildPkmon);
  }

  return shouldEncounter;
}

함수 내부에서 useGameStore와 Math.random() < 1을 직접 사용하는데, (내부에서 직접 의존성 생성)
이를 대신해 외부로부터 파라미터로 전달을 받도록 해서 의존성 주입이라고 한다.

테스트 용이성

// encounter.test.ts
const mockActions: EncounterActions = {
        incrementStepCount: vi.fn(),
        incrementTotalEncounters: vi.fn(),
        setEncounteredPkmon: vi.fn(),
      };

const mockRandom = vi
	.fn()
	.mockReturnValue(0.05) // encounter 발생, 기본값
	.mockReturnValueOnce(0.05)
	.mockReturnValueOnce(0.0) // 종 선택
	.mockReturnValueOnce(0.0); // 레벨 선택
	
const result = checkEncounter(mockActions, 10, mockRandom);

expect(result).toBe(true);
expect(mockActions.incrementStepCount).toHaveBeenCalledTimes(1);
expect(mockActions.incrementTotalEncounters).toHaveBeenCalledTimes(1);
expect(mockActions.setEncounteredPkmon).toHaveBeenCalledTimes(1);

// EncounterControls.tsx
  <button
	onClick={() => checkEncounter()}
	disabled={!encounterEnabled}
	className="w-full bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded
	disabled:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50"
>

테스트시에는 각 인자들(mockActions, mockRandom) 을 넣어서 호출한다.
mockActions : 스파이 함수들이 들어있어서 expect 매처로 확인할 수 있다.
mockRandom : Stub이라고 부르는, 실제 함수를 대체하는 역할.

Stub 함수

실제 함수(여기서는 randomFn = Math.random()) 를 대신한다.
미리 정해진 값을 반환한다. 즉 위의 mockRandom을 보면 0.05 -> 0.0 -> 0.0을 반환하는것을 볼 수 있다. (mockReturnValue는 기본값)

이제 checkEncounter()에서 mockRandom이 언제 어디서 호출되는지 확인해보자.

// shouldTriggerEncounter(encounterRate, randomFn) 내부에서
// 1
return randomFn() < 1 / encounterRate;

// generateRandomPkmon(PKMON_SPECIES, randomFn); 내부에서
// 2
  const randomSpecies =
    commonPkmons[Math.floor(randomFn() * commonPkmons.length)];
// 3
  const randomLevel = Math.floor(randomFn() * 5) + 1;

위에서부터 본다면
먼저 0.05 < 1 / encounterRate === true : 인카운터를 발생시키는데 사용하고
그리고 Math.floor(0.0*commonPkmons.length) === 0 : 리스트 맨 앞의 패킷몬을 선택하고
마지막으로 Math.floor(0*5)+1 === 1 : 패킷몬의 레벨을 1로 설정한다.

storage 추상화 계층 추가

// before
// utils.ts
localStorage.setItem("pkmon-storage", JSON.stringify({ state: gameData }));

// after
// utils.ts
import { storage } from "./storage";

storage.setItem("pkmon-storage", JSON.stringify({ state: gameData }));

// storage.ts
export interface StorageAdapter {
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
  clear(): void;
}

// 프로덕션: LocalStorageAdapter
export class LocalStorageAdapter implements StorageAdapter {...}
// 테스트: InMemoryStorageAdapter
export class InMemoryStorageAdapter implements StorageAdapter {...}

export let storage: StorageAdapter = new LocalStorageAdapter();

이렇게 프로그램이 브라우저의 로컬 스토리지에 직접 접근하지 않고
localStorage / InMemoryStorage -> storageAdapter -> useGameStore 가 된다.

원래는 zustand의 persist 미들웨어를 보면 기본적으로 createJSONStorage(()=>localStorage)를 통해 기본적으로 localStorage와 연결하는데, 나는 storage 필드를 입력했다.

export const useGameStore = create<GameState>()(
	persist(
		(set)=>({
		
		}),
		{
		  name: "pkmon-storage",
		  version: 1,
		  storage: createJSONStorage(() => storage), // <-----여기
);

커스텀 어댑터를 만들어서 zustand가 그것을 통해 데이터를 상태로 관리할 수 있게 한다.

구현

그렇다면 생각해보아야 하는게 "어댑터는 구체적으로 어떻게 구현해야 할까?"

persist 도큐먼트를 보면 이렇다.

export declare const persist : Persist;

type Persist = <
  T,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
  U = T
>(
  initializer: StateCreator<T, [...Mps, ["zustand/persist", unknown]], Mcs>,
  options: PersistOptions<T, U>
) => StateCreator<T, Mps, [["zustand/persist", U], ...Mcs]>;
declare module "../vanilla.mjs" {
  interface StoreMutators<S, A> {
    "zustand/persist": WithPersist<S, A>;
  }
}

initializer과 options 두 인자를 필요로 하고 (useGameStore.tsx에 구현되어있음)

options의 타입에 대해서 자세히 보면 이렇다.

export interface PersistOptions<S, PersistedState = S, PersistReturn = unknown> {
    name: string;
    storage?: PersistStorage<PersistedState, PersistReturn> | undefined;
    partialize?: (state: S) => PersistedState;
    onRehydrateStorage?: (state: S) => ((state?: S, error?: unknown) => void) | void;
    version?: number;
    migrate?: (persistedState: unknown, version: number) => PersistedState | Promise<PersistedState>;
    merge?: (persistedState: unknown, currentState: S) => S;
    skipHydration?: boolean;
}

내가 알아야 할 storage 의 타입에 대해 또 찾아가보면 이렇다.

export interface PersistStorage<S, R = unknown> {
    getItem: (name: string) => StorageValue<S> | null | Promise<StorageValue<S> | null>;
    setItem: (name: string, value: StorageValue<S>) => R;
    removeItem: (name: string) => R;
}

즉 이 세 함수는 반드시 구현을 해야한다는 것을 알 수 있다.