TextEncoder is not defined 에러가 발생합니다

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

33-05-jest-unit-test-mocking

해결된 질문

작성

1.6K

 FAIL  __test__/test/index.test.ts
  ● Test suite failed to run

    ReferenceError: TextEncoder is not defined

      1 | // 하드코딩된 미니 백엔드
    > 2 | import { graphql } from "msw";
        |                              ^

다음과 같은 에러가 뜨는 이유가 뭘까요?

찾아보니 node 18을 사용하지 않아 발생하는 문제라는데 node -v 을 확인해보면 제대로 18버전을 이용하고 있습니다

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! kyb1208tg님!

해당 문제는 msw 버전이 1.x --> 2.0로 올라감에 따라서 충돌이 일어난 문제예요!
문제를 해결하기 위해서는 수업에서 진행했던 "msw": "^1.1.0" 버전을 설치해 주셔야 합니다!
현재 msw 버전이 2로 올라가면서 여러 다양한 충돌이 발생하고 있으므로, 추후 안정화되기까지 1버전을 사용하는 것이 좋을 것 같네요!

그럼에도 불구하고 2버전을 도전해 보고싶으시다면, 아래 가이드를 참고해 보세요!

시작하기에 앞서, node 18버전이 있음에도 불구하고 문제가 발생했던 이유는, 실제 테스트를 jest를 사용해서 실행하게 되는데 이 jest 실행과 관련하여(구체적으로 JSDOM) 해당 node 기능을 불러오는데서 실패한 것 같네요!

이 문제를 해결하기 위한 방안이 MSW v2 홈페이지에서 안내되고 있는데, 아래와 같은 추가 파일 생성이 필요합니다.(참고: https://mswjs.io/docs/migrations/1.x-to-2.x/)
또한, 이 파일을 적용시키기 위해서는 홈페이지에서 안내되는 내용으로 undici 라이브러리를 설치해 주셔야해요! => yarn add --dev undici

본 파일을 적용하기 위해서는 아래와 같이 파일을 등록해 주셔야해요!

여기까지 진행하시더라도 아직 완벽한 호환이 이루어지지 않아,
import { setupServer } from 'msw/node' 부분에서 Cannot find module `msw/node` 관련 에러가 발생하게 됩니다.

본 에러를 해결하기 위해서는 공식 문서의 마지막 가이드인 아래 설정을 추가해 주셔야해요!

여기까지 완료하시면 해당 기능이 작동하게 돼요!
버전이 갑자기 올라가면서 많은 충돌이 있는 것 같네요!
조금 더 안정화 될때까지 기다렸다가 적용해 보는 것이 좋을 것 같네요!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
TextEncoder는 Node.js에서 글로벌 객체로 제공되는 인코딩 API입니다. Node.js 버전 18에서 TextEncoder가 정의되지 않았다는 오류가 발생한다면, 테스트 환경이 실제로 Node.js 18을 사용하고 있는지 확인해야 합니다. node -v를 사용하여 버전을 확인했을 때 올바른 버전이 출력되더라도, 테스트를 실행하는 환경이 해당 Node.js 버전을 사용하고 있지 않을 수 있습니다.

테스트가 실행되는 환경에서 실제로 Node.js 18이 사용되고 있는지 확인하는 몇 가지 방법은 다음과 같습니다:

테스트 스크립트가 정확히 어떤 Node.js 버전을 사용하는지 확인하십시오. 예를 들어 nvm이나 n 같은 버전 관리 툴을 사용한다면, 해당 터미널 세션에서 사용할 Node.js 버전을 명시적으로 설정해야 할 수 있습니다.
프로젝트에 engines 필드를 package.json에 추가하여 특정 Node.js 버전을 명시할 수 있습니다.

"engines": {
  "node": "18.x"
}

테스트 실행 시 Node.js 버전을 명시적으로 설정할 수 있는 환경변수나 테스트 설정을 확인하십시오.
특정 테스트 환경(예: Jest)에서 Node.js의 글로벌 객체들이 Mock되었거나 재정의되어 있는지 확인하십시오.

만약 여전히 문제가 해결되지 않는다면, 프로젝트의 package.json이나 테스트 설정, 환경 구성 등 추가적인 정보를 제공받아 더 자세한 진단을 해볼 필요가 있습니다.

이러한 방법들을 시도해보시고 문제가 계속된다면 더 자세한 정보와 함께 다시 문의해 주시면 감사하겠습니다.

인프런 커뮤니티 질문&답변

TextEncoder is not defined 에러가 발생합니다