jest 사용 도중 오류

강의를 들으며 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