Vitest에서 document is not defined 에러 해결하기

🤖 515 in / 650 out / 1165 total tokens

MapContainer 컴포넌트 테스트 파일에서 환경 설정 이슈를 수정했다.

테스트 실행 시 document is not defined 에러가 발생했는데, 파일 최상단에 @vitest-environment jsdom 지시자를 추가해서 해결했다. Vitest는 기본적으로 node 환경에서 실행되므로 DOM 관련 테스트를 위해서는 jsdom 환경을 명시해야 한다.

추가로 import 방식을 named import에서 default import로 변경했고, 테스트 케이스도 이벤트 기반 콜백 검증에서 실제 렌더링 결과 검증으로 수정했다. 모킹된 이벤트를 강제로 발생시키는 것보다 실제 DOM 요소가 렌더링되는지 확인하는 게 더 의미 있는 테스트다.

// @vitest-environment jsdom
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import MapContainer from '../MapContainer';
import { getMapProvider } from '@/lib/map-provider';
 
// Types
vi.mock('@/lib/map-provider');
 
describe('MapContainer', () => {
  it('renders map container with application role', () => {
    render(<MapContainer />);
    expect(screen.getByRole('application')).toBeInTheDocument();
  });
});

jsdom 환경 설정은 vitest.config.ts에서 전역으로 할 수도 있지만, 특정 파일만 DOM 테스트가 필요할 때는 인라인 지시자가 더 깔끔하다.