JavaScript Test Framework 비교 (Mocha vs Jasmine vs QUnit)

2017. 5. 17. 16:44

Node.js의 탄생과 JavaScript라는 언어의 범용성이 커짐에 따라 JavaScript의 테스트 환경은 점점 더 중요해졌다.

JavaScript가 서버언어로 사용되면서 JavaScript 테스트는 e2e 테스트 뿐만아니라 BDD 또는 TDD가 가능한 유닛 테스트가 필요했고,

기존 테스트 환경은 발전했고, 새로운 테스트 프레임워크들이 탄생했다.

여러종류의 테스트 프레임워크 중 Mocha, Jasmine, QUnit을 비교해보자.

결론

테스트는 개발을 돕기위한 도구일 뿐 목적이 아님으로 개발 환경에 맞고 사용하기 편한 툴을 선택하면 된다.

테스트 속도 차이는 미비하고, 대부분의 툴들이 비동기 테스트를 지원함으로 테스트 툴간 성능비교는 무의미 한 것 같다.

자바스크립트 프레임워크를 사용하지 않고 Jquery만 사용한다면 Qunit으로 간단하게 테스트 환경을 구축하면 되고

Angular와 같은 자바스크립트 프레임워크를 사용한다면 Mocha와 Jasmine중 선택하면 될 것이다.

TDD를 생각한다면 DOM 이 필요 없는 Jasmine을 확장성 높은 테스트 환경을 생각한다면 Mocha를 선택하면 좋겠다.

나는 테스트 기능에만 충실하고 별도의 Dependency 설정이 필요없어 사용하기 쉬운 Jasmine을 선택하고 싶다.

테스트 비교

	Mocha	Jasmine	Qunit
버전	3.4.0	2.6.1	2.3.2
인기	중간	높음	낮음
assertion 라이브러리	chai 라는 외부 라이브러리 사용	내장	내장
러너	Karma 가능	Karma 가능 (Python, Ruby)	Karma 가능
난이도	보통 (3rd party library 필요, 유연함)	쉬움	가장 쉬움
커뮤니티	12.3K github Stars, 4.45K stack over flow	12.4K github Stars, 8.01K stack over flow	3.63K github Stars, 1K stack over flow
특징	Simple, flexible, fun javascript test framework for node.js & the browser	DOM-less simple JavaScript testing framework	A JavaScript Unit Testing framewor

테스트 문법

Mocha

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

Jasmine

describe("A suite is just a function", function() {
  var a;
  it("and so is a spec", function() {
    a = true;
    expect(a).toBe(true);
  });
});

Qunit


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.3.2.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.3.2.js"></script>
<script src="tests.js"></script>
</body>
</html>


QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

사람들이 좋아하는 이유(출처 https://stackshare.io/stackups/jasmine-vs-mocha-vs-qunit)

Mocha	Jasmine	Qunit
105 오픈소스	50 TDD 로 사용할 수 있음	5 단순함
77 단순함	39 오픈소스	3 오픈소스
62 Promise 지원	14 RSpec 표준	3 세팅하기 쉬움
32 유연함	11 DOM조차 필요없는 독립성	2 Promise 지원
18 사용하기 쉬움	10 훌류한 커뮤니티
7 브라우저와 서버 테스트	5 세팅하기 쉬움
2 다른 좋은 대안이 없음	3 단숨함
	2 Pivotal-Labs에서 개발함

Stackshare 특징비교 (https://stackshare.io/stackups/jasmine-vs-mocha-vs-qunit)

구글 트렌드

'JAVASCRIPT' 카테고리의 다른 글

Html5 Video Player 알아보기, 개발하기 (1)	2017.06.06
Javscript Framework와 Library (Angular VS React.js VS VanillaJS) (0)	2017.05.22

어쩌다, 블로그