[오류해결] Jest encountered an unexpected token

오류 발생

Typescript와 Jest로 작성한 테스트코드를 실행했더니 Jest encountered an unexpected token 라는 오류가 발생했다.

오류 상세

npm test

> test
> jest

 FAIL  app/components/example/Button.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

원인 분석

Jest에서 Typescript로 작성된 코드를 해석할 수 없어서 발생한 오류이다.

해결 방법

Jest 공식문서에서는 babel을 활용한 방법과 ts-jest를 활용한 방법 2가지 해결 방법을 찾을 수 있었다.
두가지 방법의 차이는 타입 체킹 여부이다.
babel은 순수하게 transpiling만을 지원하기 때문에 타입 체킹의 이점을 누릴 수 없다.
반면 ts-jest 에서는 온전히 Typescript의 혜택을 누릴 수 있었다.
나는 타입체킹을 지원하는 ts-jest를 선택했다.
ts-jest를 사용하는 방법은 아래와 같이 의존성 추가 후 설정 파일을 변경하면 된다.

1. ts-jest 의존성 추가

아래 명령어를 입력해 ts-jest를 추가한다.

npm i --save-dev ts-jest

2. jest.config.ts 수정

아래와 같이 jest.config.ts 파일에 preset: "ts-jest" 옵션을 추가한다.

import type { Config } from "jest";

const config: Config = {
  ... 다른 옵션 생략 ...
  preset: "ts-jest",
};
export default config;

3. 적용

테스트를 실행하면 정상적으로 동작하는것을 확인할 수 있다.

npm test

> test
> jest

 PASS  app/components/example/Button.test.tsx
  ✓ when the Button is clicked, then background color changes red to blue (44 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |     100 |      100 |     100 |     100 |                   
 Button.tsx |     100 |      100 |     100 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.848 s
Ran all test suites.

참고 자료

• Typescript로 Jest 시작하기 - Jest 공식문서
• ts-jest 설정 - ts-jest 공식문서