예전 JavaScript 테스트 라는 글을 쓴적이 있는데, 그때 더 살펴봐야겠다라고 생각한 라이브러리가 Sinon.js이다.

최근에는 Jasmine 테스트 프레임워크가 괜찮아 보여 등안시 하다가, 기회가 되서 Sinon.js를 쓰게 되었다.

Jasmine에서 Ajax를 mocking 하려면 stubRequest를 만들고 andReturn이라는 메소드를 이용하여 직관적으로 테스트 할 수 있다.

1
2
3
jasmine.Ajax.stubRequest("/another/url").andReturn({
responseText: "immediate response"
});

sinon도 있지 않을까 하는 마음으로 찾다가 결국 yieldsTo 라는 메소드를 찾았다.
원래는 jQuery ajax mocking 정도는 useFakeXMLHttpRequest 메소드를 이용하면 되지만,
JSONP인 경우는 호출 방식이 다르기 때문에, useFakeXMLHttpRequest으로는 mocking이 어렵다.

Sinon.js로 JSONP를 테스트 하려면…

stub에게 callback을 호출하도록 시키는 yieldsTo 메소드를 이용하여, mocking 해야만 한다.
물론, fakeServer 를 이용하여 mocking 할수 있지만,
yieldsTo가 훨~씬 간편하다.

코드는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// beforeEach
let stub = sinon.stub(jQuery, "ajax");

// Given
stub.yieldsTo("success", { param: "데이터", data: "bla bla" });

// When
jQuery.ajax(
url: "http://sculove.github.io",
success: function() { console.log("callback") },
dataType: "jsonp",
);

// Then
expect...

// afterEach
stub.restore();

주의할 것은 ajax를 실행하기 전에 이미 yieldsTo에 대한 정보를 미리 설정해놓아야 한다.

Comment and share

Jasmine을 이용한 Javascript Test

JavaScript Test 문서를 작성 후, 실제 테스트를 어떻게 진행해야 하는지에 대해 정리한 문서.

목차

  • 테스트는 왜 필요한가?
  • 테스트를 위한 개발 프로세스
  • 자주 사용하는 테스트 유형
    • 비동기 테스트
    • setTimeout 테스트
    • Ajax 테스트 (jasmine-ajax)
    • DOM 테스트 (jasmine-dom)
    • Global 객체 테스트
  • 테스트에 대한 흔한 질문

자료 : https://sculove.github.io/slides/testing/

Comment and share

JavaScript Test

in Tech

JavaScript 테스트

JavaScript는 사용자 행위를 직접적으로 담당하는 부분이기 때문에, 예외 사항도 많고, 고민해야할 부분도 많다. 뿐만아니라, 사용자의 행위에 따른 대응(?)이 거의 대부분 비동기의 이벤트로 처리하기 때문에, 실제로 무결점의 프로그램을 개발하기는 쉬운 문제가 아니다.

이 글은 이러한 JavaScript를 효과적으로 테스트하고 유지보수하기 위해, 테스트 환경을 구축하는 간단한 메모이다.

테스트 프레임웍 (Mocha + chai)

JavaScript 테스트 프레임웍은 대표적으로 QUnit, Mocha, Jasmine과 같은 프레임웍이 존재한다. 각자 장단점이 있지만, 이 글에서는 가장 확장성이 용이한, mocha에 대해 이야기한다.
mocha는 node와 브라우저 모두에 적용할 수 있고, TDD, BDD, QUnit, export 스타일 모두 적용할 수 있는 프레임웍이다. assertion문 또한, 취향(?)에 따라 선택하여 적용할 수 있다.
많은 assertion문이 있지만, expect, should, assert를 모두 지원하는 chai와 함께 mocha를 사용해 보자.

설치

1
npm install mocha chai --save-dev

환경 설정

mocha

mocha는 mocha.opt 파일을 통해 옵션을 설정할 수 있으며, mocha cli를 이용하여 테스트를 진행 할 수 있다.

1
./node_modules/.bin/mocha
chai

chai는 chai.expect, chai.should, chai.assert와 같이 사용해야함으로 귀찮다. 전역에 expect, should, assert를 저장하여, 테스트 코드에서는 expect, should, assert를 사용할 수 있도록 하자.
isomorphic 환경을 위해, require 지원여부에 따라 처리하는 파일을 테스트 파일 전에 포함시킨다.

1
2
3
4
5
6
7
8
9
10
11
var expect;
var assert;
if (typeof require === "function") {
var chai = require("chai");
expect = chai.expect;
assert = chai.assert;
chai.should();
} else {
expect = chai.expect;
chai.should();
}

chai-http를 이용하면 request에 대한 테스트도 할 수 있다.

테스트 러너 (karma)

JavaScript는 브라우저 환경에 따라, 테스트 결과가 달라지기 때문에, 실제 브라우저에서 테스트를 꼭! 해야만한다. 테스트 러너는 여러 환경에서 동일 테스트를 호출 할 수 있다.

대표적인 툴로 Karma가 있다.

mocha와 연동

mocha와 연동하기 위해서는 karma-mocha를 설치하고, mocha 스타일의 로깅을 보고자 한다면, karma-mocha-repoter를 설치한다.

커버리지 연동

커버리지 툴인 istanbul을 연동하기 위해서는 karma-coverage를 설치한다.

브라우저

실제 Karma를 이용하여 테스트를 해보니, 꼭 브라우저만 테스트 할 수 있는게 아니라, 여러가지 타스크를 한꺼번에 실행하는 용도로 사용 할 수도 있을 것 같다.
https://karma-runner.github.io/0.13/config/browsers.html

karma-script-launcher를 이용하면 다음과 같이 브라우저를 script로 실행할수 있다. 첫번째 파라미터로 url이 전달된다.

1
2
// in the karma.conf.js
browsers: ['/usr/local/bin/custom-browser.sh'],

ES6 지원

소스와 테스트 파일을 ES6로 작성한 경우에는 테스트가 실행 되기 전에 사전에 컴파일을 할수 있다.

mocha

  • --compilers 옵션을 이용하여 babel-register,등과 같은 모듈을 이용하여 테스트전에 컴파일 할 수 있다. 하지만, 테스트 환경(node, browser)이 es6을 지원하면 그럴 필요도 없다.
1
./node_modules/.bin/mocha --compilers js:babel-register
  • --harmony 옵션을 사용하여 테스트 코드에 대해 ES6을 사용할 수 있다.

karma

Mock-up

JavaScript는 비동기 상황을 테스트해야하기 때문에, 실제로 테스트 코드를 짜는 것은 굉장히 까다로운 작업이 될수 있다. 이러한 것을 해결하기 위한 하나의 방법으로 stub, mock object를 만드는 방법이 있다.

Mock VS Stub

  1. 어떻게 테스트 결과를 검증하는가? (상태 검증 VS 행위 검증)
  2. 테스팅하고 디자인하는 철학적인 차이
    http://martinfowler.com/articles/mocksArentStubs.html

Sinon.JS

sinon은 spy, stub, mock, fakeTimer, fackHttpRequest, fackServer, 등을 지원하는 단위테스트 프레임웍이다.

  • 함수 호출 여부(행위)를 검증하고자 한다면, stub를 이용한다. (이벤트의 핸들러 테스트)
  • timer, XMLHTTPRequest의 fake 테스트가 가능

개인적으로… 써보니 제약은 있지만, 꽤 좋은 라이브러리다.이건 별도로 더 확인해 봐야 겠다.

Comment and share

  • page 1 of 1
Author's picture

sculove

아내와 아들 그리고 딸밖에 모르는 남편


FrontEnd Developer


대한민국/서울