트러블슈팅

jest 사용 도중 오류

노엠디엔 2023. 8. 25. 13:02

강의를 들으며 jest로 테스트코드를 작성중 

SyntaxError: C:\Users\jh\Desktop\dutchpay-app\src\components\CreateGroup.spec.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (7:12): 라는 오류가 발생했다.

const renderComponent = () => {
    //render 함수('렌더링할컴포넌트')
    render(<CreateGroup/>)
    const input = screen.getByPlaceholderText('2022 제주도 여행');
    const saveButton = screen.getByText('저장');
    const errorMessage = screen.queryByText('그룹 이름을 입력해 주세요.');
   
    //공통으로 사용될 Elemnet DOM 요소들을 renderComponent함수에서 생성
    return {
        input,
        saveButton,
        errorMessage,
    }
};

근데 친절하게도 터미널에서 @babel/preset-react 추가하라는 말과 babel.config에 추가하라는 메시지가 출력되었다.

추가로 jest 공식문서에 jsx를 지원하지 않는다고 나와있었다

https://jestjs.io/docs/code-transformation

 

 

npm i --save-dev @babel/core @bable/preset-react  @babel/preset-env react-test-renderer
@babel/preset-typescript
다음과 같은 라이브러리를 설치해야하는 것 같아 설치후
src경로에 babel.config 파일을 생성하여 설정을 해주었다.

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

그런데도 오류가 발생해서 이유를 찾아보니 타입스크립트에 관한 추가적인 설정도 필요해보였다..뭐이라 많냐

대충 jest 는 jsDOM을 브라우저 환경에 맞게 제공해주어야한다는 것 같다. string으로 변환하라는 뜻?

jset.config.json 파일과 패키지 json 파일에서 또 설정을 해달라는 말이였다.. 지져스;;

이후에도 강의와 달리 타입스크립로 작성하다 보니 오류가 발생했는데 오랜 시간이 걸렷다..

추가로 @types/jest ts-jest jest-envioronment-jsdom 을 설치했다

테스트 코드 render(컴포넌트) 부분에서 계속 html?을 읽을수 없다는 에러 메시지가 나와 

한참 찾아보다 jest-envioronment-jsdom 을 설치해서 해결할 수 있었다.

하.. 테스트 힘들다..

.jest.config.js

module.exports = {
  // 기존 설정...

  // TypeScript 파일 확장자를 Jest가 이해할 수 있도록 설정
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx'],
  // ts-jest를 프리셋으로 사용하도록 설정
  preset: 'ts-jest',
 
  testEnvironment: 'jsdom',
  // Transform 설정: .tsx 파일을 ts-jest로 컴파일
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  // TypeScript 컴파일러 설정
  globals: {
    'ts-jest': {
      tsconfig: './tsconfig.json', // tsconfig.json 파일 경로
    },
  },
};

babel.config.json

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

tsconfig.jest.json

{
    "compilerOptions": {
      "target": "ES5", // 컴파일 대상 버전
      "jsx": "react", // JSX 사용
      // 나머지 설정...
    },
    "include": ["src/**/*.ts", "src/**/*.tsx"], // 컴파일할 파일 경로
    // 나머지 설정...
}

 

jest오류 사항 정리된 블로그: 

https://qiita.com/Seo-4d696b75/items/5ac4333cadd3c50af8e3