[js] javascript Test Qunit을 이용해보자.

js,javascript,qunit

1. 왜.

font 딴에서 js용 Unit Test가 필요했다. 테스트 주도 기반(TDD)를 이끌어나갈 필요도 있었고 코어한 연산로직에 검증이 필요했다.

2. 그래서 무엇인가.

javascript용 unitTest를 찾아보니 많은 라이브러리가 존재하였다. (Jasmin/Sinon/Qunit..)
이것들 중에 가장 간편하고 빠르게 사용가능한 것을 선택하길 원했고, 그 결과 Qunit을 사용해 보기로하였다.

3. 써보자.

import

qunit은 js unitTest를 가능하게 해주며, html 파일상에서 아름답게 test.js의 결과를 확인할 수 있다.
실제 test결과를 볼 html파일을 만든다.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
    <!--qunit  css 임포트-->
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-git.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <!--jquery 임포트-->
  	<script type="text/javascript" src="../js/jquery.min.js"></script>
  	<!--qunit 임포트-->
  <script src="https://code.jquery.com/qunit/qunit-git.js"></script>

<!--필요한 파일 임포트-->
  <script src="../js/common.js"></script>

<!--테스트 돌릴 스크립트-->
  <script src="test.js"></script>
</body>
</html>

위의 소스와 같이 qunit.js,css + jquery정도 임포트하면 아주 아름다운 준비화면이 완성된다.

test

같은 디렉토리내에 test.js 파일을 준비한다.

QUnit.test( "testSuit01", function( assert ) {
	assert.equal(1,1, 'success');			
});

위와 같이 코딩을 하면되고 실제 쓰이는 assert의 종류들은 굉장히많다.
assert.ok, assert.throw, assert.notOk… 등이 그것들이다.

4.마치며

언제 어느 상황이던 테스트는 기본이라는것을 다시 깨달았다.
어? 이것까지 꼭 해야되나? 라는 생각이 드는 순간 바로해야한다. 그런생각이 든다면 100% 테스트케이스를 작성해야한다.
‘코드가 잘 돌아간다는 것을 어떻게 검증할거지?’ 라고 물어보신 것이 오늘도 머릿속에 멤돈다.

Ref.

qunit-apiDoc

← Previous Post Next Post →