[React] Jest SyntaxError: Cannot use import statement outside a module

TDD를 공부하기 위해 Jest를 설치하고...

 

//jest.setup.js
import "@testing-library/jest-dom";

 

react testing library를 사용하기 위해 jest.setup.js 파일을 생성하고 test를 실행하는데 에러가 발생했다.

공식문서와 스택오버플로우를 돌아다니며 설정 프로퍼티에 대한 설명을 읽고 아래와 같이 다 세팅했음에도

SyntaxError: Cannot use import statement outside a module 에러가 자꾸 발생했는데...

 

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

 

//jest.config.js
module.exports = {
  verbose: true,
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy",
  },
};

 

jest.setup.js는 js 파일이라 transfrom 프로퍼티에 있는 정규식에 포함되지 못해

javaScript로 변환되지 못했던 것이다.(!)

jest.setup.js파일을 jest.setup.ts파일로 바꿔주거나 js|jsx를 babel-jest로 transform하게끔 추가해주면 된다.

 

module.exports = {
  verbose: true,
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy",
  },
};