Fall in IT.

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

프로그래밍언어/Javascript & Typescript

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

D.Y 2017. 12. 4. 23:46


안녕하세요.


오늘은 간단하게 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()함수가 시작된 후에 한번만 실행



참고자료


모두 즐거운 코딩하세요~



Comments