karma mocha 테스트 환경 구축

요즘 테스트와 nodejs에 관심이 많아지면서 두 개를 섞은 nodejs에서 테스트하는것에 대해 포스팅을 해보고자한다. 아주 간단한 내용에 대해 나름 자세하게 포스팅을 할 예정이다. 이런식으로 작성하는 이유는 이런 포스팅을 내가 찾지못해서 꽤 삽질을 했기때문이다.

nodejs에 대해서는 이해도가 충분치않은 상태이기때문에 중간 설명에 잘못된 설명이 있을수 있다.

일단 nodejs가 설치되어있어야한다. https://nodejs.org/ko/

nodejs를 설치했으면 테스트 예제를 작성할 프로젝트를 생성하자. 나는 test-environment 라는 이름으로 생성했다. 생성한 프로젝트로 들어와서 npm init 커맨드로 node 프로젝트임을 초기화하면 된다.

mkdir test-environment && cd test-environment && npm init

프로젝트 명칭이나 레파지토리 주소 등을 입력받게되는데 그냥 테스트 예제이므로 공백으로 엔터만 쳐서 넘어가도된다. 해당 부분에 대해 궁금한 분들은 nodejs 로 검색해서 알아봐야할듯하다.

프로젝트 초기화가 완료되면 본격적으로 테스트 코드를 작성해보자.

프로젝트 루트(필자같은 경우 test-environment) 아래에 test 코드를 담을 test 폴더를 생성하고, test.js 라는 테스트 파일을 작성했다. 테스트를 진행할 실 코드는 루트 아래에 src 폴더를 생성하고 calculator 라는 js 파일로 생성했다.

test-environment/src/calculator.js

let plus = (num1, num2) => num1 + num2;

plus 함수의 문법이 익숙치 않은 분들도 계실것같다. es6 스펙에 추가된 arrow function이라는 함수 정의법이며, 자바의 람다와 비슷하다. arrow function 과 자바의 람다 둘다 익숙치않은 분이라면... 좌항에 인자 2개를 받아서 우항이 리턴이라고 이해하면 된다.

test-environment/test/test.js

describe("test", () => {
    it("it", () => {
        let result = plus(2, 5);
        assert.equal(result, 7);
    });
});

describe(), it()이 mocha가 제공하는 함수들이며, 단언문인 assert는 chai라는 라이브러리가 제공하는 함수들이다. 자바개발자가 좀 더 이해하기 쉽게 설명하자면 mocha는 jUnit, chai는 hamcrest라고 생각하면 편할것같다.

자, 이제 코드작성은 다 됐고 이 테스트 코드를 실행할 수 있게끔 의존성들을 추가해주자.

npm install --save-dev mocha
npm install --save-dev chai

mocha와 chai를 사용한다고 위에서 말했으니 얘네들은 기본적으로 추가가 되어야한다. --save-dev 옵션을 넣으면 프로젝트 package.json에 의존성이 자동으로 추가가된다.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^4.1.2",
    "mocha": "^3.5.3"
  }
}

그다음으로 karma를 설치하자. 프론트 코드는 브라우저마다 스펙이 달라 의도치않은 작동을 하는 경우가 심심찮게 발생하는데, karma는 자동으로 특정 브라우저들에서 전부 테스트를 돌려주는 테스트러너이다.

karma를 사용하려면 설정을 해줘야할것들도 있는데 일단 karma를 설치해주자.

npm install -g karma-cli
npm install --save-dev karma

그리고 프로젝트 루트에서 karma init 명령어를 실행하면 npm init 할때처럼 사용자에게 이것저것 물어보며 자동으로 설정파일을 제공해준다.

테스트 프레임워크로 mocha를 사용할거니 mocha로 설정해주고, requirejs가 뭔지는 잘 모르겠지만 사용한다고하자. 테스트할 브라우저는 일단 chrome으로 설정하고 테스트 코드의 경로를 설정해준다. 제외할 파일은 없으므로 빈값으로 넘어가고 requirejs 부트스트랩파일도 뭔진 모르겠지만 사용한다. karma watch는 설정해도좋고 안해도 상관없다.

설정이 완료되면 karma.conf.js 라는 karma 설정파일과 test-main.js 라는 requirejs 설정파일이 생성될것이다. 지금 바로 건드릴건 딱히 없고, 어떤 필드들이 있는지 구경만 해보자.

* requirejs란? http://d2.naver.com/helloworld/591319

이후 package.json을 확인해보면 몇가지 karma 관련 의존성이 더 추가되어있는걸 볼수있다.여기까지했으면 package.json에 scripts 필드에 "test" : "karma start" 를 추가해주자.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^4.1.2",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-requirejs": "^1.1.0",
    "mocha": "^3.5.3"
  }
}

그리고 프로젝트 루트에서 커맨드로 npm test 를 실행해보자.

npm test

잘 될줄 기대하셨던분들은 아쉽겠지만 잘 안될것이다. requirejs 관련 에러가 발생한다면 필자와 같은 에러이다. requirejs 의존성을 추가해주자.

npm install --save requirejs

* --save와 --save-dev 중 어떤 옵션을 사용하는가에 따라 package.json에 의존성이 추가되는 필드가 다르다. dev를 통해 개발용과 실제코드용이라는 의미는 알겠는데 의미 외 어떤차이가 있는지는 잘 모르겠다.

필자도 남한테 설명할정도의 지식이 있는게 아니어서 조목조목 설명하긴 힘들지만 이런저런 의존성들을 볼때 karma는 기존에 잡혀있는 의존성을 이용하는게 아니라 karma용 의존성들을 따로 추가해서 사용하는것 같다(karma-mocha, karma-requirejs 등). 그런데 karma-requirejs 의존성은 있는데 우리는 아직 일반 requirejs를 의존성에 추가해준적이 없으므로 에러가 발생하는것 같아 requirejs를 추가해줬다. 원인은 정확히 모르겠고 에러메세지만보고 추가한것이다.

requirejs가 추가됐으면 다시 npm test를 실행하자.

이런엔 plus 함수를 찾을수 없다고 에러가 뜰것이다. karma.conf.js에 files 필드를 수정해주자.

files: [
  'test-main.js',
  {pattern: 'src/*.js', included: true},
  {pattern: 'test/*.js', included: false}
]

그리고 다시 npm test를 실행하면 이번엔 assert 를 못찾는다고 에러가 뜰것이다. 메세지가 바뀐걸보니 plus는 정상적으로 include 된것같다. assert는 단언문인데 우리는 단언문 라이브러리로 chai를 사용하고있다. karma 설정파일에 이부분도 추가해주자.

frameworks: ['mocha', 'requirejs', 'chai']

물론 karma용 chai 의존성도 추가해줘야한다.

npm install --save-dev karma-chai

작업이 다됐으면 다시한번 npm test를 날려보자

드디어 성공하는걸 볼 수 있다!

그런데 성공하고나서도 브라우저가 꺼지지않는걸 볼 수 있는데 그게 싫으면 karma 설정에서 singleRun을 true로 설정하면 된다.

singleRun: false

* 윈도우에서 git bash로 작업시 karma  Cannot read property 'slice' of undefined 이런 에러가 발생하는 경우가 있는데 git bash 말고 기본 cmd 창을 이용하면 된다(https://github.com/karma-runner/karma/issues/1724).

이번 포스팅은 뭔가 공부를하고 예제를 짠게아니라 그냥 예제부터 짜면서 에러나면 해결하는식으로 진행한걸 남긴것이다. 그러다보니 잘 모르면서 작성한부분이 많은데 이제 차츰차츰 그동안 발생했던 문제들의 원인을 찾아봐야할것같다.