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

Error

 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

BUT

'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

Solution

BABEL !!

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
'transpile'

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: [
    [
      "@babel/preset-env",
      {
        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-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))'
    ]
};

ts-jest

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

babel-jest

• 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"
  }
}