[JavaScript] Mocha 로 JavaScript 테스팅 시작하기

들어가며

2015년 Frontend Tooling Servey 에서 조사한 바에 따르면, JavaScript Testing Tool 항목 1위는 Jasmine 이었고 그 뒤로 Mocha 가 Jasmine 과 거의 동등한 비율을 차지하고 Qunit, Tape 등이 뒤를 이었다. (사실 사용하지 않는 비율이 압도적으로 많다..)

mochajs.org 에서 Mocha 에 대해 아래와 같이 설명하고 있다.

Mocha is a feature-rich JavaScript test framework running on Node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub.

스스로를 기능이 풍부하다고 자랑하고 있는데 실제로 지원하고 있는 기능들의 목록은 아래와 같다.

browser support

simple async support, including promises

test coverage reporting

string diff support

javascript API for running tests

proper exit status for CI support etc

auto-detects and disables coloring for non-ttys

maps uncaught exceptions to the correct test case

async test timeout support

test-specific timeouts

growl notification support

reports test durations

highlights slow tests

file watcher support

global variable leak detection

optionally run tests that match a regexp

auto-exit to prevent "hanging" with an active loop

easily meta-generate suites & test-cases

mocha.opts file support

clickable suite titles to filter test execution

node debugger support

detects multiple calls to done()

use any assertion library you want

extensible reporting, bundled with 9+ reporters

extensible test DSLs or "interfaces"

before, after, before each, after each hooks

arbitrary transpiler support (coffee-script etc)

TextMate bundle

and more!

가장 많은 사용자층을 가지고 있는 Testing Tool 중 하나인 Mocha(이하 모카)의 설치부터 시작해서 사용방법 전반에 대해서 살펴보자.

(문서화가 잘 되어 있어서 대부분 mochajs.org 의 documentation 의 내용을 기반으로 작성되었다)

Installation

모카의 설치는 간단하다. 아래와 같이 npm을 사용해서 global 옵션을 주어 설치하게 된다.

$ npm install mocha --global

Getting Started

모카는 기본적으로 현재 실행된 지점의 test 디렉토리 아래에 있는 파일들을 실행하게 된다.

test 디렉토리 아래에 test.js 파일을 생성하고 아래의 코드를 타이핑해보자.

var assert = require("assert"); //nodejs에서 제공하는 aseert 모듈

describe('Array 테스트', function() {
	describe('indexOf() 메서드', function () {
		it('값이 없을 때에는 -1 을 리턴함', function () {
			assert.equal(-1, [1,2,3].indexOf(5));
			assert.equal(-1, [1,2,3].indexOf(0));
		});
	});
});

test.js 파일을 저장한 후 아래와 같이 mocha 를 호출하면 테스트를 실행할 수 있다.

$ mocha

mocha 를 실행하면 아래와 같이 결과가 나올 것이다.

  Array 테스트
    #indexOf()
      ✓ 값이 없을 때에는 -1 을 리턴함


  1 passing (11ms)

만약 test 디렉토리 아래에 test.js 파일 외에도 다른 js 파일들이 있다면 해당 파일들도 모두 실행되게 된다. test 디렉토리가 존재하지 않는다면, mocha가 실행되는 현재 디렉토리에서 test.js 파일을 찾게 된다. 특정 파일을 실행하고 싶다면, 아래와 같이 mocha 뒤에 파일명을 입력해도 된다.

$ mocha test.js

Assertions

위의 예제에서는 assertion library 로 nodejs에서 제공하고 있는 assert 모듈을 사용했지만, 사실 모카는 어느 assertion library 와도 함께 사용할 수 있다. 다시말해 should.js 나 nodejs 에 내장된 assert 모듈이나 다른 것들을 사용해도 관계없다는 뜻이다.

mochajs.org 에서 리스팅하고 있는 호환 가능한 assertion library 는 아래와 같다.

should.js - BDD style shown throughout these docs

expect.js - expect() style assertions

chai - expect(), assert() and should style assertions

better-assert - c-style self-documenting assert()

Asynchronous Code

위의 예제에서는 동기 코드에 대해 보여주고 있지만, 비동기 코드를 테스팅하는 것도 어렵지 않다. 단순하게 done 이라는 이름의 콜백을 비동기 코드가 정상적으로 완료되었을 때 호출해주면 된다. done()이 호출되지 않으면, 설정된 timeout(기본값은 2000ms) 후에 실패로 간주한다.

describe('비동기 코드 테스트', function () {
	describe('#setTimeout', function () {
		it('2초 이내에 완료되지 않으면 실패', function (done) {
			setTimeout(function () {
				done();
			}, 3000);
		});
	});
});

3초 뒤에 done()을 호출하도록 했기 때문에 위의 코드를 mocha 로 실행하면 아래와 같이 실패가 뜨게 된다.

  비동기 코드 테스트
    #setTimeout
      1) 2초 이내에 완료되지 않으면 실패


  0 passing (2s)
  1 failing

  1) 비동기 코드 테스트 #setTimeout 2초 이내에 완료되지 않으면 실패:
     Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.

Hooks

테스트 케이스마다 반복해서 먼저 설정되어야 하는 부분이나, 테스트를 마치고 초기화가 필요할 때 아래와 같은 메서드를 사용할 수 있다.

describe('다양한 hooks 방법', function() {

	before(function() {
		// 이 블록 내의 테스트들을 실행하기에 앞서 한번 실행되는 부분
	});

	after(function() {
		// 이 블록 내의 테스트들을 모두 실행한 후에 한번 실행되는 부분
	});

	beforeEach(function() {
		// 이 블록 내의 각 테스트들이 실행되기 전에 실행
	});

	afterEach(function() {
		// 이 블록 내의 각 테스트들이 실행된 후에 실행
	});

	// test cases
});

Reporters

출력되는 결과를 다양한 포맷으로 보여줄 수 있는데, 얼마나 다양한 취향을 만족시키기 위해 노력했는지가 엿보인다..

아래와 같이 --reporter 옵션을 통해 출력 결과 포맷을 지정해줄 수 있다.

$ mocha --reporter spec

$ mocha --reporter doc

$ mocha --reporter nyan

$ mocha --reporter tap

$ mocha --reporter landing

$ mocha --reporter list

$ mocha --reporter progress

$ mocha --reporter json

$ mocha --reporter markdown

$ mocha --reporter html

$ mocha --reporter min

마치며

모카에 대해 전반적으로 살펴봤을 때, 자체적으로 assertion 기능을 제공하기보다 다양한 assertion library 와 함께 사용 가능하고, BDD/TDD 등의 테스팅 스타일에 유연하게 대응하며 개발시에 필요한 다양한 테스팅 관련 편의를 제공하는 테스팅 프레임워크라는 느낌이 들었다.

JavaScript 테스팅 프레임워크에 대해 고민하고 있던 분들에게 조금이라도 도움이 되었기를 기대한다.