TextEncoder is not defined 문제 해결하기

최근에 팀 내 저장소 패키지 버전 올리는 작업을 하던 중 테스트 코드가 갑자기 깨져버렸습니다. 문제는 Axios 1.6.8을 1.7.0로 업데이트하면서 발생했습니다.


Axios 1.7.0으로 업데이트한 후, Jest에서 TextEncoder is not defined 에러가 발생했습니다. 이 문제는 jsdom 라이브러리가 실제 브라우저 환경을 재현하기 위해 Node.js global을 덮어씌우는 과정에서 TextEncoder가 추가되지 않아 발생하는 문제였습니다.


2019년에 jsdom 저장소에서 이미 이슈(https://github.com/jsdom/jsdom/issues/2524) 로 제기된 문제지만, 아직까지 해결되지 않고 있습니다. 그러나 다행히도 최근 Axios 1.7.1 버전에서는 TextEncoder 미지원 환경에 대한 fallback 처리가 추가되어, 현재는 문제없이 사용이 가능합니다.


한편, MSW 2.x 버전에서도 동일한 이슈가 발생한다고 합니다. 이 경우, MSW 공식 문서(https://mswjs.io/docs/migrations/1.x-to-2.x/#requestresponsetextencoder-is-not-defined-jest) 에서 제공하는 해결 방법을 따라하시면 해결이 가능합니다. 참고로 가이드엔 jest.polyfill.js로 나와있는데 폴더에 setupTests.js 파일이 있으시면 아래 코드를 추가해서 간단하게 해결이 가능합니다.


const { TextDecoder, TextEncoder } = require('node:util')

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder }
})

Add support for TextEncoder and TextDecoder · Issue #2524 · jsdom/jsdom

GitHub

Add support for TextEncoder and TextDecoder · Issue #2524 · jsdom/jsdom

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 5월 24일 오전 10:49

조회 1,267

댓글 0

    함께 읽은 게시물

    Crash 제대로 감지하고 다루기

    A

    ... 더 보기

    Crash 감지하고 다루기

    iOYES

    Crash 감지하고 다루기

    가장 훌륭한 경비절감 방법은 ‘몰입’이다. 가장 훌륭한 생산성 향상 방법도 ‘몰입’이다. 이는 많은 경영학자들이 연구를 통해 증명한 사실이다.

    ... 더 보기

    [백진기 칼럼]그래 한번 미쳐보자?(110편)

    메디칼타임즈

    [백진기 칼럼]그래 한번 미쳐보자?(110편)

    서버 과부하를 프론트엔드에선 어떻게 대처하는게 좋을까요?

    ... 더 보기

    iOS에서 서버 과부하 감지 및 API 호출 최적화

    iOYES

    iOS에서 서버 과부하 감지 및 API 호출 최적화

    [서평]일잘러의 비밀, 챗GPT와 GPTs로 나만의 AI 챗봇 만들기

    ... 더 보기

    사용자가 공유한 콘텐츠

    www.hanbit.co.kr

    사용자가 공유한 콘텐츠

    모든 프런트엔드 개발자가 알아야 할 접근성 필수 사항

    ... 더 보기

    [번역] 모든 프런트엔드 개발자가 알아야 할 접근성 필수 사항

    velog.io

    [번역] 모든 프런트엔드 개발자가 알아야 할 접근성 필수 사항

     • 

    저장 43 • 조회 2,965