[Vitest] Error: You must set an element with Modal.setAppElement(el) to make this accessible

1. 현상

(1) 에러 발생

• Vitest 환경에서 ReactModal 테스트 구동시 발생한다.

[에러 로그]
Error: You must set an element with Modal.setAppElement(el) to make this accessible
setAppElement throws error in tests
Warning: react-modal: App element is not defined

(2) 해결 방법

• 테스트 대상 모달 컴포넌트에서 NODE_ENV 조건문을 추가한다.

// before

ReactModal.setAppElement('#root');

// after - 테스트 환경에서 setAppElement를 실행치 않도록 변경

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root');

2. 원인

(1) 에러가 발생하는 이유는?

• 테스트 환경에서 ReactModal 컴포넌트 렌더링시 왜 에러가 발생할까? 그 이유는 setAppElement 때문!
• ReactModal.setAppElement는 모달이 열렸을 때 스크린 리더가 모달 외부의 콘텐츠를 무시하도록 한다.
• 하지만 테스트 환경에서는 ReactModal.setAppElement 메서드가 렌더링 대상 요소를 찾지 못한다.
• 그래서 “테스트 환경이라면 setAppElement 메서드를 실행하지 않는” 코드가 필요하다.

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#root');

❓ 엥? 그런데 왜 조건을 NODE_ENV !== ‘test’로 설정해야할까?

• 그 이유는 Vitest에서 테스트러너가 구동되는 환경이 NODE_ENV = test이기 때문이다. (관련 코드)
• 테스트 실행 시 별도로 NODE_ENV=test를 선언하지 않아도, 테스트 러너가 자동으로 이 값을 설정한다. (아래 이미지는 vitest 레포 일부 코드)

3. 결론

✅ 아하! ReactModal테스트시 Modal.setAppElement(el)에서 요소를 찾지 못하면, 테스트 환경에서는 해당 함수의 실행을 스킵하면 되는군!

✅ 아하! 테스트 환경에서 어떤 코드를 실행하지 않으려면 process.env.NODE_ENV !== 'test'를 하면 되겠군!