Jest encountered an unexpected token
SyntaxError: Cannot use import statement outside a module

• typescript 프로젝트에서 jest설치 후에 테스트 작성하는데, 이상하게 오류가 떴다

• 무고한 eslintrc, tsconfig 이것저것 건드려봤는데 잘 동작하지 않았다

• 알고 보니까 typescript에서 jest 사용하려면 아래 절차를 yarn add -D jest 이후에 추가적으로 해줘야 한다

  • https://jestjs.io/docs/getting-started#using-babel
  • https://jestjs.io/docs/getting-started#using-typescript

따라하기

1
2
3
4
5
6
7

# jest 설치
yarn add --dev jest
yarn add --dev @types/jest

# typescript에서 jest 돌리기 위한 추가 종속성 설치
yarn add --dev @babel/preset-typescript
yarn add --dev babel-jest @babel/core @babel/preset-env

• 종속성을 설치한다

1
2
3
4
5
6

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
  ],
};

• babel.config.js 를 추가한다

eslint를 같이 사용하고 있다면

1
2
3
4
5
6
7

{
  "env": {
    // ...
    "jest": true
  }
  // ...
}

• eslintrc 에 env.jest를 true로 해준다

참고

• https://jestjs.io/docs/getting-started#using-babel

1
2
3
4
5
6
7

{
  "env": {
    // ...
    "jest": true
  }
  // ...
}

• env에 추가해준다

• ⚠️ 추가 해주고 F1 > eslint.restart 명령을 실행해 eslint를 재부팅한다

상황

• jest를 eslint와 처음 사용해본다

eslint(no-undef)

‘describe’ is not defined.
‘test’ is not defined.
‘expect’ is not defined.

• 위 에러가 나왔다

참고

• https://stackoverflow.com/questions/44611190/using-jest-in-my-react-app-describe-is-not-defined