1th School Project : Software Engineering__20210531 Jest: SyntaxError: Unexpected token export

dhsys112·2021년 5월 31일


 export const err = (v) => { throw v; };

    SyntaxError: Unexpected token 'export'

Jest doesn't support ES6 module and hence throwing this error when you directly run the test with Jest

Why does Jest not support 'import,export' in itself ?

In javascript, there are 2 types of module systems

1) ES6( JS Standard )
2) commonJS( old version )

Jest uses commonJS module system, which is older version


'import,export' module system is 'es6' module system which is the recent one

That is

Jest cannot support recent , new 'es6' module system since it depends on 'commonJS' , older version of module system



by using the babel , we can transform ECMAScript2015++(es6) code into previous version so that we can use 'import,export' in 'Jest'

What is Babel ?

1. Background : cross-browsing

2. Transpile

3. Basic Process

4. Plugin

5. Presets

6. Polyfills

1. Cross Browsing

basic purpose of 'babel' is to write unified , one js code and make it work in almost all kinds of browser,

As I mentioned above,
by using the 'babel', we can make 'recent' js code even in old browsers

because, babel changes 'recent' js code into 'old' js code that 'old' browser can apply

That is, babel changes CMAScript2015++ code into
CMAScript2015 code

2. Transpile

change process like above is called

3. Basic Processes

1) Parsing

read the code, changes codes into 'AST' structure which is appropriate data structure for building processes

2) Transformation

  • change AST,
    that is, change actual code

3) Printing

  • print out actual outcomes

4. Plugin

But if you see deep dive,
BABEL do 1) parsing 3) priting processes

2) transformation process
is done by 'plugin'

ex) let,const --> var

there are many kinds of plugins according to different usages

5. Presets

set of plugins

ex) preset-env : ECMAScript2015+ into previous version
ex) preset-flow, preset-react, preset-typescript
presets for changing 'flow,react,typescript'

6. Polyfills

During the transformation processes, there might be some codes that cannot be changed to previous version by 'presets'

ex) new Promise()

in order to deal with this ,
babel add 'polyfill' which is a piece of code

module.exports = {
  presets: [
        useBuiltIns: "usage", 
        corejs: {
          // polyfill version
          version: 2,

Actual Code Solution

1) .babelrc.json

  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]


transform 'import,export' into 'commonJs' module system

2) jest.config.ts

module.exports = {
    roots: ['<rootDir>/test'],
    moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "json"],
    transform: {
        '^.+\\.(ts)?$': 'ts-jest',
        '^.+\\.(js|jsx)?$': 'babel-jest'
    testEnvironment: 'node',
    testMatch: [
        '<rootDir>/**/*.test.(js|jsx|ts|tsx)', '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'


A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.


  • allowing es6++ to be used when testing

3) package.json

  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "build": "tsc -p .",
    "test": "jest"
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "moment": "^2.29.1",
    "mysql": "^2.18.1",
    "nodemon": "^2.0.7"
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-typescript": "^7.13.0",
    "@types/jest": "^26.0.23",
    "@types/node": "^15.6.1",
    "babel-jest": "^27.0.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "jest": "^27.0.3",
    "ts-jest": "^27.0.1",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.2"
Dream of being "물빵개" ( Go abroad for Dance and Programming)

1개의 댓글

2023년 5월 31일

The Dr. Infrared Heater Portable Space Heater is a top-rated option for heating large rooms. It features an advanced dual heating system that combines infrared heating with convection heating. https://seemylargeroom.com/best-oil-filled-heater-for-large-rooms/

답글 달기