vs code에서 node js 에서 mocha 시작하기 , visual studio code 에서 nodejs javascript mocha 테스트하기, 시작하기

vscode에서 대표적인 java/type script test framework인 mocha를 소개해보고자 합니다.

최종꼴은 아래와 같이, 내가 작성한 테스트에 대한 실행결과를 확인할 수 있는 화면을 보도록 하고자 합니다.

진행순서는 아래와 같습니다.
1. nodejs설치
2. vscode(visual studio code설치)
3. mocha 설치
4. vscode - mocha test explorer 플러그인설치
5. 샘플코드 작성
6. settings 설정
7. 샘플테스트코드 작성
8. 테스트 실행

1. nodejs설치, 노드 설치

아래 홈페이지에서 다운로드 하여 설치해줍니다. 메인화면에 바로 다운로드 버튼이 존재합니다.
https://nodejs.org/
개인적으로 최신버전보다는 LTS를 좀 더 선호합니다.
LTS는 Long Term Support의 약자로, 장기 지원되는 버전을 의미하며,
안정성에 중점을 둔 버전입니다. 2022년 11월 현재 18 버전으로 진행해보겠습니다.

2. vs code 설치(visual stuio code), 비주얼 스튜디오 코드 설치

아래 홈페이지에서 다운로드하여 설치해줍니다. 메인화면에 바로 다운로드 버튼이 존재합니다.
https://code.visualstudio.com/

3. mocha 설치

1) 키보드에서 windows키 + R을 누른후, cmd를 쳐서 명령프롬프트를 열어줍니다.

2) 아래 명령어를 쳐서 mocha를 설치해줍니다.

npm i mocha -g

 

4. vs code - mocha test explorer 플러그인설치

visual studio code에서 mocha를 잘 사용하려면 플러그인을 설치해주어야 합니다.

 

1) 먼저, 2에서 설치한 visual studio code를 실행해줍니다.

 

2) visual studio code의 좌측 하단에 톱니바퀴를 클릭후 Extensions를 눌러줍니다.

(단축키로는 ctrl + shift + x 입니다)

3) 좌측 패널의 검색창에 mocha test explorer라고 입력하고, install 버튼을 눌러줍니다.
mocha라고만 쳐도 상단에 뜹니다.

 

 

4) 잠시 시간이 지난후, 설치가 완료되면 좌측에 플라스크모양의 아이콘이 생긴것을 확인할 수 있습니다.

5. 샘플코드 작성

테스트하려는 대상 코드를 작성해주는 부분입니다.
mocha를 이용하려면 node 프로젝트를 생성해야하며,
코드는 모듈화되어 있어야 테스트가 가능합니다.

1) 폴더만들기 : node 프로젝트 생성
커맨드창에서 프로젝트 폴더를 위치시킬 곳으로 이동한 뒤,
mkdir [폴더명] 명령어로 폴더를 만들어줍니다.
이 예제에서는 C:\에 mynode라는 폴더를 만들어보겠습니다.

2) node project초기화 : node 프로젝트 생성
프로젝트 폴더르 들어간 후(cd mynode), npm init 명령어로 node 프로젝트를 생성해보겠습니다.
명령어를 입력하면 아래와 같이 몇가지 설정값들을 이력할 수 있습니다.
아무것도 입력하지 않고 엔터키만 계속 눌러도 되며, 계속 엔터를 누르면 아래와 같이 설정됩니다.

package name: (mynode)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\mynode\package.json:

{
"name": "mynode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

 

그러면, C:\mynode\package.json 파일이 만들어지는데요,
추가적으로 텍스트에디터를 열어 "type":"module" 을 추가해줍니다.
그럼 최종적으로 package.json의 내용은 다음과 같이 됩니다.

 

3) 샘플코드 작성
프로젝트 폴더에 operator.js 파일을 만들고,
operator.js 파일내용에 아래와 같이 코드를 작성해줍니다.

function plus(a, b){
     return a + b;
}
function minus(a, b){
     return a - b;
}

export {
     plus,
     minus
};

 

6. settings 설정

.vscode 폴더를 만들고, 그 아래에 settings.json 파일을 만들어 줍니다.

(절대경로 주소는 C:\mynode\.vscode\settings.json이 됩니다.)
settings.json 파일내용은 아래와 같이 작성해줍니다.

{
     "mochaExplorer.files": ["test/**/*.js"]
}

7. 샘플 테스트 코드 작성

앞서 만든 샘플 코드를 테스트하는 코드를 작성해보겠습니다.
test폴더를 만들고, 그 아래에 operator.js라는 파일을 만들어 줍니다.
파일내용은 아래와 같이 코드를 작성해줍니다.

import {plus, minus} from '../operator.js'
import assert from 'assert';

describe('test', () => { // describe()는 test suite를 설정하기 위함
     it("plus 테스트 ", () => { // it()은 개별 unit test case를 설정하기 위함
         assert.equal(plus(2,3) , 5);
     });
     it("minus 테스트", () => {
         assert.equal(minus(2,3) , -1);
     });

     it("plus실패하는 테스트", () => {
         assert.equal(plus(2,3),4);
     });
});

여기서 it메소드는 테스트를 하려는 unit test case입니다.
describe는 test suite를 설정하기 위함입니다.
test suite라는 것은 일종의 그룹화라고 생각하시면 됩니다.
테스트 케이스를 좀 더 체계적으로 관리하고, 한번에 여러개의 테스트 유닛을 run할 수 있도록 해줍니다.

 

8. 테스트 실행

1) visual studio code를 실행한 뒤,
위 메뉴에서 file > add folder to workspace를 눌러준 후, 앞서 만든 프로젝트 폴더(C:\mynode)를 선택해줍니다.

 

 

2) 앞선 내용들을 잘 따라오셨으면, 아래와 같은 구조로 파일이 만들어져 있을것입니다.
혹시 빠진 파일이 있다면 앞의 내용을 다시 확인하여 파일을 만들어주세요

3) 좌측에 플라스크 모양 버튼을 누르면, 좌측패널에 테스트들이 보입니다.
각 항목에 마우스를 대면 벌레 아이콘, 화살표 아이콘, 화살표가 문서를 가리키는 아이콘이 있는데요,
각각 디버깅모드로 테스트실행, 테스트실행, 소스보기를 뜻합니다.

4) 맨 상단의 화살표를 누르면 모든 테스트가 실행이 되고, 아래와 같은 결과가 나와, 각 테스트케이스의 테스트 pass여부를 확인할 수 있습니다.

 

 

총평

플러그인만 설치하면 바로 되었으면 하는 아쉬움이 있는데,
.vscode폴더와 settings.json파일을 따로 만들어서 세팅해줘야하는게 번거로운거 같습니다.
그리고 decribe와 it을 쓰니 뭔가 코드가 지저분한 느낌이 듭니다.
java같이 annotation을 활용해보는 방식으로 개선하면 어땠을까라는 생각이 듭니다.
그리고 code coverage도 안보이는데 따로 설정을 해야하는점이 아쉬워보입니다.
기회가 되면 code coverage를 확인할 수 있는 방법도 확인하여 포스팅해보겠습니다.

#javascript,#mocha,#test,#framework,#visualstudiocode,#visualstudio,#code,#visual,#studio,#비주얼스튜디오코드,#모카,#자바스크립트,#테스트,#테스트프레임워크

 

https://devscb.com/post/141

Getting started with mocha in vs code && node js, testing nodejs javascript mocha in visual studio code, getting started