[jest + rtl + monorepo + next + ts]SyntaxError : Unexpected token '<' (ft. "jsx": "react-jsx")

해당 에러 해결 방안은 다음의 설정을 기준으로 다룹니다.

package manger
pnpm: "@9.0.0"

engines
node: ">=20"

dependencies
✚ "classnames": "^2.5.1"
✚  "next": "^14"
✚ "react": "^18.3"
✚  "react-dom": "^18.3"

dev dependencies
✚ "@jest/globals": "^29.7.0"
✚ "@testing-library/jest-dom": "^6.4.8"
✚ "@testing-library/react": "^16.0.0"
✚ "@types/jest": "^29.5.12"
✚ "@types/node": "^20"
✚ "@types/react": "^18.3.3"
✚  "@types/react-dom": "^18.3.0"
✚ "eslint": "^8"
✚ "eslint-config-next": "15.0.0-rc.0"
✚ "jest": "^29.7.0"
✚ "jest-environment-jsdom": "^29.7.0"
✚ "jest-scss-transform": "^1.0.3"
✚ "node-sass": "^9.0.0"
✚"sass": "^1.77.6"
✚"ts-jest": "^29.2.3"

폴더 구성
    📁 apps
              ㄴ 📁 storybook
                      ㄴ 📁 web
    📁 packages
             ㄴ📁design-system
    📄 turbo.json
    📄 package.json
    ... 생략...

👩🏻‍🔧 문제 상황

https://turbo.build/repo/docs/guides/tools/jest의 문서대로 jest 설정 중 위 그림과 같은 에러가 발생했다.

Jest | Turborepo

ts 파일들은 테스트가 잘 되므로 문제는 tsx, 즉 컴포넌트를 다루는 테스트 파일들에 있었다.

외부에서 import해온 컴포넌트들 모두 render 할 수 없는 상황.

 

문제를 해결하고자 해당 에러 메시지로 구글링을 열심히 했지만 현재 나의 프로젝트와 맞는 해결책이 없었다.

https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
https://imygnam.tistory.com/80

 

☑️ babel이 아닌 ts-jest 사용 중 : babel은 트랜스파일 도구이므로 따로 설정을 해주지 않으면 타입체크를 해주지 않기 때문에 간결성을 위해 ts-jest 선택

🍀 상황 파악

먼저 지금까지 설정해 줬던 거를 살펴보자.

설정

 

📁 web

 

📄 jest.config.json

{
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "testMatch": ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"],
  "transform": {
    "^.+\\.ts?$": "ts-jest",
    "^.+\\.tsx?$": "ts-jest",
    "^.+.test.tsx?": "ts-jest",
    "^.+\\.scss$": "jest-scss-transform"
  },
  "moduleDirectories": ["node_modules"]
}

 

📄 . eslintrc.mjs

/** @type {import("eslint").Linter.Config} */

export default {
  root: true,
  extends: ["@tripie/eslint-config/next.js"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
  },
  overrides: [
    {
      files: ["/components/*/__tests__/**/*"],
      env: {
        jest: true,
      },
    },
  ],
};

 

📄 tsconfig.json

{
  "extends": "@tripie/typescript-config/react-library.json",
  "jsdom": "react",
  "compilerOptions": {
    "plugins": [
      {
        "name": "next"
      }
    ],
    "outDir": "dist",
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "next.config.mjs",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "dist"]
}

 

테스트 코드

ㄴ 📄 components/__test__/themeButton.test.tsx

import { expect } from "@jest/globals";
import { cleanup, render } from "@testing-library/react";
import "@testing-library/jest-dom";
import "@testing-library/jest-dom/jest-globals";
import { Text } from "@tripie/design-system";

afterEach(cleanup);

it("text has 'os control'", () => {

  const { getByText } = render(<Text>os control</Text>);
  expect(getByText("os control")).toBeInTheDocument();
  
});

 

Text Component : @tripie/design-system/src/typography/text/_test.tsx

"use client";

import classNames from "classnames/bind";
import Style from "./_text.module.scss";

const style = classNames.bind(Style);

export interface TextProps {
  dim?: boolean;
  size?:
    | "default"
    | "h0"
    | "h1"
    | "h2"
    | "h3"
    | "h4"
    | "text"
    | "small"
    | "tiny";
  color?: "primary" | "secondary" | "danger" | "warning" | "gray" | "emphasize";
  bold?: boolean;
  children: string;
  className?: string;
}

function Text({ children, className, ...props }: TextProps) {
  const splitText = `${children}`.split("\n").map((sentence, index) => {
    return (
      <span className={style(className, "text")} key={index + sentence}>
        {sentence}
      </span>
    );
  });
  return <div>{splitText}</div>;
}

export default Text;

 

📁 design-system

 

나머지 설정은 동일한데 다른 건

 

📄 tsconfig.json

{
  "extends": "@tripie/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist"
  },
  "include": ["typings", "src"],
  "exclude": ["node_modules", "dist"],
  "jsx": "react-jsx"
}

 

 

여기서 힌트를 얻어서 "jsx" 설정을 변경해 봤다.

🍀 해결

jsx:"preserve"에서 jsx: "react-jsxdev"로 변경해 줬다.

{
  "extends": "@tripie/typescript-config/react-library.json",
  "jsdom": "react",
  "compilerOptions": {
    "plugins": [
      {
        "name": "next"
      }
    ],
    "outDir": "dist",
    "jsx": "react-jsxdev" // 변경
  },
  "include": [
    "next-env.d.ts",
    "next.config.mjs",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "dist"]
}

 

🤔 해결은 됐는데, 왜 된 거지?

 

ts 공식 문서에서 jsx 설정에 따라 어떻게 달라지는지 살펴보자.

공식 문서에 의하면 JSX가 어떻게 변경될지를 지정할 수 있는 설정이라고 한다.

즉,. tsx 확장자로 된 파일들을 js로 어떻게 변경해 줄 지에 대한 설정이다. 가능한 설정은 다음 표로 정리했다.

export const HelloWorld = () => <h1>Hello world</h1>; 라는 코드가 있다고 하면

"react-jsx"	.js 파일들을 _jsx 함수를 호출하여 js 파일로 방출. PROD 환경에 최적화	import { jsx as _jsx } from "react/jsx-runtime"; export const HelloWorld = () => _jsx("h1", { children: "Hello world" });
"react-jsxdev"	.js 파일들을 _jsx 함수를 호출하여 js 파일로 방출한다는 점은 react-jsx와 동일하지만, DEV 환경에서만	import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx"; export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);
"preserve"	.jsx 파일들을 jsx 변경없이 방출	import React from 'react'; export const HelloWorld = () => <h1>Hello world</h1>;
"react-native"	.jsx 파일들을 jsx 변경없이 방출	import React from 'react'; export const HelloWorld = () => <h1>Hello world</h1>;
"react"	.js 파일들을 jsx React.createElement 호출과 동등한 방식으로 변경하여 방출	import React from 'react'; export const HelloWorld = () => React.createElement("h1", null, "Hello world");

 

preserve로 설정했을 때는 동작하지 않았지만 "react-jsx"나 "react-jsxdev로 설정해 줬을 때 동작했다.

("react"로 설정 시 아래와 같은 에러 발생)

components/__test__/themeButton.test.tsx:34:33 - error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

 

 

 

이는 jest가 파일 파싱을 할 수 없어서 발생했던 문제다. 그냥 jsx 파일(preserve)이 아니라 jest가 인식할 수 있는 코드로 ts 설정을 변경해 주니 (react-jsxdev) 잘 동작하게 되었다.

---

📚 References

https://turbo.build/repo/docs/guides/tools/jest

TSConfig Reference - Docs on every TSConfig option

https://www.typescriptlang.org/tsconfig/#jsx

Jest | Turborepo