Mocha + Import, Export & VSCode debugger

HoJeong Im·2022년 1월 31일

ES6 ErrorNote JavaScript

Error Note

목록 보기

9/10

개요

리팩토링 책을 읽으며, node에서 기본적으로 사용하는 esm 모듈 대신, ES6 이후부터 사용 가능한 import, export 문을 이용해서 코드를 깔끔하게 작성하고 싶었습니다
이미 해결책들이 많이 있었지만, 한국어로 된 부분이 없어서 이렇게 작성하게 되었습니다.

1. babel 관련 패키지들을 설치해줍니다.

저는 yarn을 사용했습니다. (npm 써도 무방해요)

yarn add @babel/cli @babel/core @babel/preset-env @babel/register --dev

@babel/cli : 링크
- 명령줄에서 파일을 컴파일하는 데 사용할 수 있는 CLI
@babel/core : 링크
- babel에서 사용하는 core lib입니다
@babel/preset-env : 링크
- 환경에 필요한 구문 변환을 우리가 관리할 필요 없이 최신 JS를 사용할 수 있게 해줍니다.

babel 구성

.babelrc를 프로젝트 root 위치에 생성 후 아래 내용을 추가해주세요

{
	"presets" : ["@babel/preset-env"]
}

package.json

package.json의 스크립트에서 mocha에 --require 옵션을 통해 해당 모듈을 사용한다고 적어줍니다

{
  "devDependencies": {
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@babel/register": "^7.16.9",
    "mocha": "^9.2.0"
  },
  "scripts": {
    "test": "mocha",
    "test_recursive": "mocha --recursive --require @babel/register './test/**/*.js'"
  }
}

확인!

추가! Mocha + vscode debugger

vscode 디버거를 사용해서 mocha를 사용하려는 경우 launch.json에 파일 수정이 필요합니다.
.vscode/launch.json에 두어야 합니다.
--require, @babel/register를 args 옵션에 두는 게 핵심입니다

{
    "configurations": [
    {
        "args": [
            "-u",
            "bdd",
            "--timeout",
            "999999",
            "--colors",
            "--recursive",
            "--require",
            "@babel/register",
        ],
        "runtimeArgs": [
        ],
        "internalConsoleOptions": "openOnSessionStart",
        "name": "Mocha Tests",
        "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
        "request": "launch",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "type": "node",
        "sourceMaps": true
    }
    ]
}