react에서 jest 설정시 오류 해결 과정

1. Support for the experimental syntax 'jsx' isn't currently enabled

제미나이의 원인 추측

Babel을 사용하여 JSX 문법을 일반 JavaScript로 변환하는 과정이 Jest 테스트 환경에 적용되지 않았기 때문입니다. Jest는 테스트를 실행하기 전에 babel-jest를 통해 소스 코드를 변환하는데, 이 과정에 필요한 설정이 누락되었을 가능성이 높습니다.

1) npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-jest

• core는 있는지 모르겠지만, 나머지 세 개는 설치되어 있음

2) babel.config.js 생성

module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', {
      runtime: 'automatic'
    }]
  ]
};

• runtime: 'automatic' // React 17 이후 버전
• React 16 버전을 사용 중이라면, runtime: 'classic'으로 설정하거나 runtime 옵션을 제거

글쓴이는 19.x버전이라 automatic 사용

2. '파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.'

Jest가 CommonJS 모듈을 사용하는데, 프로젝트의 다른 부분이 ES 모듈(import/export)을 사용하고 있기 때문

• 오류가 아니라 단순 경고성 메시지

Jest: Jest는 기본적으로 CommonJS 모듈 시스템( require/module.exports )을 사용

React 프로젝트: 대부분의 최신 React 프로젝트는 ES 모듈 시스템( import/export)을 사용

제미나이

경고 발생: Jest가 ES 모듈로 작성된 파일을 읽을 때, Babel을 통해 이를 Jest가 이해할 수 있는 CommonJS 형태로 변환합니다. 이 과정에서 호환성 문제나 성능 저하가 있을 수 있음을 알리기 위해 경고를 표시하는 것

• 테스트 자체에는 영향을 미치지 않으므로 무시해도 무방함

• 글쓴이는 팀 프로젝트이기에 일단 수정을 하지 않고, 팀원들의 환경에서도 작동하는지 확인하고 수정하기로 결정

3. 'React is not defined'

• Jest 테스트 환경에서 React 객체를 인식하지 못할 때 발생

• runtime: 'automatic' // 이 부분이 'automatic'인지 확인하기
  또는

• 테스트 파일에 import React from 'react'; 코드를 추가

• 글쓴이는 vscode 환경 반영이 늦어서 안된 것이었어서 vscode 재부팅으로 해결

4. ' The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.

    Consider using the "jsdom" test environment.'

• jest.config.js 생성
  • Jest는 테스트를 실행할 때 jsdom 환경을 사용하여 브라우저 API 관련 오류를 해결. 별도의 설정이 없다면 Jest가 이 파일을 자동으로 찾아 적용.

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
};

또는

• package.json 수정

{
  "name": "your-project",
  "version": "1.0.0",
  "jest": {
    "testEnvironment": "jsdom"
  }
}

• 글쓴이는 팀 프로젝트다보니, 충돌을 방지하기 위해 jext.config.js를 생성하는 것을 선택

5. 'Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'html')

      at new JSDOMEnvironment (../../../../../../node_modules/jest-environment-jsdom/build/index.js:72:44)'

원인은 두 가지

1. jsdom 패키지 누락: Jest의 jsdom 환경은 jsdom이라는 별도의 패키지에 의존하므로, 만약 jsdom이 프로젝트에 설치되어 있지 않다면, Jest가 이를 불러올 수 없어 오류가 발생

2. jsdom 버전 문제 : jest-environment-jsdom의 버전과 jsdom의 버전 간에 호환성 문제

사용해본 방법

• 첫 번째 방법
  일단 npm install --save-dev jsdom로 jsdom을 설치해보고

• 두 번째 방법
  npm install --save-dev jest-environment-jsdom로 jest에서 제공하는 jsdom을 설치

글쓴이는 1번으로도 해결이 안되서, 검색과 주변 분들의 도움을 받아 두번째 방법으로 해결

• jsdom은 Node.js에서 가상 DOM 환경을 생성하기 위한 독립형 라이브러리
• jest-environment-jsdom은 Jest 테스트를 위해 특별히 DOM 환경을 제공하기 위해 jsdom을 활용하는 Jest 전용 환경

-> environment-jsdom 사용

6. jest 해결 후 expect(title.tagName).toBe("p") 테스트 실패

element.tagName 속성은 항상 대문자로 반환 하므로, 대문자로 작성해줄 것

참고링크
2024.02.13 - 실수에서 배우는 개발태도
jest가 react 읽지 못함 오류