💡 학습 개념 정의

• 핵심 키워드: globalThis, Mocking (vi.fn), Vitest Setup, Expectation (Matchers)
• 한 줄 정의: 테스트 환경을 브라우저처럼 모방하고, expect 문을 통해 비즈니스 로직의 결과가 설계 의도와 일치하는지 자동으로 검증하는 기법이다.

📝 상세 학습 내용

1. 도입 배경 (Why?)

• 환경의 파편화 해결: Vitest는 Node.js 환경에서 실행되지만, persist 로직은 브라우저 전용인 localStorage를 호출한다. 이를 모킹하여 ReferenceError를 방지한다.
• 수동 검증의 한계 탈피: console.log를 통한 눈으로 하는 확인은 일시적이며 실수가 잦다. expect를 이용해 코드가 성공/실패 여부를 스스로 판단하게 하여 테스트 자동화를 구현한다.

2. 핵심 원리 및 특징 (What?)

• globalThis: 브라우저와 Node.js 환경의 전역 객체 접근법을 통합한 표준이다.
• vi.fn(): 호출 이력을 기록하는 스파이 함수로, 외부 API 호출 여부를 검증할 때 사용한다.
• expect와 Matchers: 테스트의 '판사' 역할을 한다. 실행 결과(Actual)와 기대치(Expected)를 비교하며, .toBe(), .toHaveLength() 등 다양한 Matcher를 통해 검증을 수행한다.

3. 실제 활용 예시 (How?)

// packages/widget/src/store/widget/index.test.ts
 
it('위젯 삽입 시 순서가 밀려나고 중복은 방지되어야 한다', () => {
  const { insertWidget } = useWidgetStore.getState();
 
  // 1. 중간 삽입 검증
  insertWidget('calendar', 1);
  const widgets = useWidgetStore.getState().widgets;
 
  expect(widgets).toHaveLength(5

🔍 심화 학습 (Deep Dive)

• Q: 왜 globalThis.localStorage = ... 라고 직접 할당하지 않고 Object.defineProperty를 쓰는가?

  • A: localStorage는 실제 브라우저에서 특수 관리되는 객체다. defineProperty를 쓰면 속성 설명자(Property Descriptor)를 제어할 수 있어 기존 정의를 안전하게 덮어쓰거나 실제 브라우저의 동작 방식을 더 정교하게 모방할 수 있기 때문이다.

• Q: console.log가 있는데 왜 굳이 expect를 써야 하는가?

  • A: expect는 성공 시 침묵하고 실패 시에만 상세한 에러 로그(Diff)를 남긴다. 이는 개발자가 일일이 로그를 확인할 필요 없이 '초록색 체크표시'만으로 로직의 무결성을 확신하게 해준다.

• Q: Matcher 중 .toBe()와 .toEqual()의 차이는 무엇인가?

  • A: .toBe()는 참조 값이나 기본 타입을 비교하고, .toEqual()은 객체나 배열의 내부 데이터(구조)가 같은지 깊은 비교를 수행한다.

• Q: 특정 테스트 케이스만 실행하거나 제외하고 싶을 때는 어떻게 하는가?

  • A: it.only(...)를 사용하면 해당 테스트만 단독으로 실행하며, it.skip(...)을 사용하면 특정 테스트를 건너뛴다. 복잡한 로직을 디버깅할 때 유용하다.

📌 오늘의 핵심 요약

• globalThis는 어떤 환경(Node, Browser 등)에서도 통하는 전역 객체의 표준 이름이다.
• setup.ts를 활용하면 테스트 실행 전 브라우저 환경을 완벽하게 모방하여 환경 에러를 원천 차단할 수 있다.
• vi.fn()은 단순한 가짜가 아니라 호출 이력을 모두 기록하는 똑똑한 스파이 함수다.
• expect 문은 수동 로그 확인을 자동화된 검증으로 바꾸어 테스트의 신뢰도를 높인다.

🔗 참고 공식 문서

Vitest: Getting Started Vitest의 전반적인 사용법과 환경 설정(Setup) 방법을 확인할 수 있다.

Vitest: Mock Functions (vi) vi.fn()을 포함한 모킹 API의 상세 명세와 활용법을 제공한다.

Vitest: Expect / Matchers .toBe(), .toEqual() 등 다양한 검증 메서드에 대한 설명을 확인할 수 있다.

MDN: globalThis 전역 객체 접근을 위한 표준 키워드인 globalThis에 대한 상세 정의를 확인할 수 있다.

MDN: Object.defineProperty() 객체의 속성을 정의하고 제어하는 상세한 메커니즘을 설명한다.

Zustand: Persist Middleware 테스트 에러의 발단이 된 스토어 데이터 유지(Persistence) 기능을 확인할 수 있다.