Jest 초기환경 설정에서 에러핸들링

---

💩 Jest 초기환경 설정에서의 에러들

테스트코드 작성을 위한 공부 중 발생한 jest 초기환경 설정에서의 에러들을 기록하기위해 글을 작성한다.

Unexpected token "<"

React의 JSX문법을 사용하였을 때 발생한 테스트에러.

Error

Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)

  50 |
  51 | render(
> 52 |   <Gallery images={images} />,
     |   ^

해결방법
@babel/preset-react 프리셋을 설치하여 설정해준다.

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

---

ReferenceError: regeneratorRuntime is not defined

테스트에서 async/await를 사용해 비동기 함수를 작성하였을 때 발생한 오류

Error

ReferenceError: regeneratorRuntime is not defined

해결방법

바벨이 async/await 코드를 regeneratorRuntime로 변환하기 때문에 발생한 오류이므로 regeneratorRuntime을 모듈을 포함한 플러그인을 설치하여 설정해준다.

// babel.config.js
module.exports = {
  'presets': ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
  'plugins': ['@babel/plugin-transform-runtime'],
};

---

document is not defined

React-Testing-Library는 DOM환경에서 실행되어야 하기때문에 발생한 오류

Error

    ReferenceError: document is not defined

       9 |   const setup = () => {
      10 |     const [Wrapper, store] = prepareMockReduxWrapper();
    > 11 |     render(
         |     ^
      12 |       <Wrapper>
      13 |         <TodoForm />
      14 |       </Wrapper>

해결방법
테스트환경을 jsdom으로 설정해준다.

//package.json
"scripts": {
    ...
    "test": "jest --env=jsdom",
    ...
  },

---

🙏 참고

• stack overflow: Jest tests on React components: Unexpected token "<"
• React regeneratorRuntime is not defined 에러 해결
• stack overflow: "ReferenceError: document is not defined" when trying to test a create-react-app project