Javascript 단위 테스트(Unit Test) 환경 구축

안녕하세요.

오늘은 간단하게 Javascript 단위 테스트 환경 구축하는 방법에 대해서 알아보도록 하겠습니다.

목적

• Javascript 단위 테스트(unit test) 환경을 구축합니다.
• Front-End 테스트를 실행할 수 있는 환경을 간단하고, 빠르게 구축합니다.
• 테스트 툴에 대한 세부적인 설정은 생략합니다.

요구사항

• 보편적이고 많이 사용되는 Front -End 단위 테스트 툴을 사용합니다.
  
• 보편적이고 많이 사용되는 코드로 예제를 작성합니다.

구축환경

• 맥북프로에 로컬 테스트 환경을 구축합니다.
• 자스민 + 카르마 조합을 사용합니다.
  (카르마가 실행되면 카르마 서버가 실행되고 동기화된 브라우저가 열립니다. 이때 카르마는 서버로서 테스팅 환경을 제공하고 카르마 위에서 자스민 테스팅 프레임워크가 동작합니다. )

용어정리

• 카르마(Karma)란?
  - 테스트를 실행시킬 테스트 러너
  - Angular 팀이 제작한 툴
  
  
• 자스민(Jasmine)이란?
  - 테스트 코드를 수행할 테스팅 프레임워크
  
  (자바스크립트 단위 테스트 툴은 Mocha, Jasmine, Chai, Jest, Tape, Enzyme, Karma, Selenium, phantomjs 등  다양하며, 조합해서 쓰게 되면 경우의 수는 더 많아집니다. 테스팅 툴은 각각의 문제를 해결하는 데에 집중하기 때문에 조합해서 사용하며, 테스트 러너 / 프레임워크 등으로 구분되어 불리곤 합니다.)

구축방법

1. Nodejs 설치
   
   
2. js-unit-test 디렉터리 생성
   
   
   
3. 진입 후, package.json 생성
   $ npm init 
   (이때 test command에 karma start를 입력합니다.)
   
   
   
4. 카르마 & 자스민 & 카르마 런처(크롬 브라우저에서 실행시키기 위함) 설치
   $ npm install karma karma-chrome-launcher jasmine-core --save-dev
   
   
   
5. karma-cli 설치
   (카르마로 테스트를 진행하기 위해서 테스트할 소스 코드, 테스트 코드 등의 경로 및 테스팅 프레임워크 및 테스트 실행 환경을 정의하기 위해 karma.config.js를 만들어야 합니다. 이때 karma-cli를 사용하여 쉽게 생성할 수 있습니다.)
   
   $ npm install -g karma-cli
   
   
6. karma 설정파일(karma.config.js) 생성
   $ karma init
   (테스트 수행이 끝난 뒤, karma와 브라우저가 종료되게 하려면 karma.config.js에 singleRun 설정을 true로 변경하면 됩니다. jenkins와 같은 CI툴과 함께 사용될 경우에 필요합니다.)
   
   (js디렉터리 하위의 js파일들을 테스팅하기위해서 경로를 js/*js로 설정합니다.)
   

사용방법

• js-unit-test 디렉터리 하위에 js디렉터리를 생성합니다.
• js 디렉터리 안에 샘플 코드를 작성합니다.

• 간단한 테스트 코드 
  

  'use strict';

  
  

  var sayHello = function() {

  return 'hello';

  };

  
  

  // Test case

  describe('sayHello.js', function() {

  it('should returns string "hello"', function() {

  expect(sayHello()).toBe('hello');

  expect(sayHello()).not.toBe('bye');

  });

  });
• 테스트 실행
  $ npm run test
  
  

자주 사용되는 테스팅 용어

• describe()
  - 단위 테스트 명세 집합을 의미합니다.
  
  
• it()
  - 단위 테스트를 위한 함수
  
  
• 매처함수
  - expect(variable).toBe(true);
  - expect(variable).not.toBe(true);
  - expect(variable).toEqual(b);
  - expect(stringA).toMatch(/stringB/);
  - expect(stringA).not.toMatch(/stringB/);
  - expect(object.foo).toBeDefined();
  - expect(variable).toBeNull();
  - expect(a).toContain("b"); // 배열변수 a에 "b"라는 요소가 포함돼 있는지
  - expect(a).toBeGreaterThan(b); // a 변수 값이 b 변수보다 큰지
  
  
• beforeEach()
  - 각각 it()함수가 시작되기 전에 실행
  
  
• afterEach()
  - 각각 it()함수가 시작된 후에 실행
  
  
• beforeAll()
  - it()함수가 시작되기 전에 한번만 실행
  
  
• afterAll()
  - it()함수가 시작된 후에 한번만 실행

참고자료

• karma, https://karma-runner.github.io/1.0/index.html
• jasmine, https://jasmine.github.io/2.4/introduction.html
• http://han41858.tistory.com/5
• http://meetup.toast.com/posts/126
• angular quickstart, https://github.com/angular/quickstart
  (angular 퀵스타트 소스를 사용하여 테스트 개발시 사용해도 좋습니다.)
• http://frontend.diffthink.kr/2016/07/mocha-karma.html
• http://hyeonjae.github.io/javascript/2015/04/04/jasmine-karma.html
• http://blog.jeonghwan.net/tool/2017/03/28/jasmine.html

모두 즐거운 코딩하세요~