자바스크립트 테스트 도구

차유림·2021년 9월 5일

테스트 종류

소프트웨어 테스트 종류는 여러가지가 있지만
"범위"에 따라 크게 단위(Unit), 통합(Integration), E2E(End to End) 테스트로 나눌 수 있다.

이전에는 단위테스트를 많이 작성하는 것이 주 흐름이었지만,
테스트 툴이 발전하면서 통합테스트를 주로 작성하자는 의견도 있다.
테스트 피라미드 -> 테스트 트로피

자바스크립트 테스트 환경

브라우저 환경

실제 브라우저를 실행해서 테스트코드를 실행한다.
브라우저의 모든 api를 사용해서 테스트가 가능하다.
브라우저 호환성 테스트가 가능하다.
ex) Karma(E2E 테스트 도구를 제외하면 Karma가 유일하다. Karma는 테스트러너의 역할만 하기 때문에 별도의 테스트 프레임워크가 필요하다.)

Node.js 환경

브라우저 프로세스에 비해 가볍기 때문에 실행속도가 빠르다.
브라우저의 DOM api 를 사용할 수 없기 때문에, JSDOM 라이브러리를 사용하여 브라우저 환경을 가상으로 구현하는 방식을 사용한다.
JSDOM으로 테스트하는 경우, 실제 렌더링을 하지는 않으므로(렌더링 엔진없음) UI 요소의 레이아웃에 대한 테스트나 내비게이션 관련 동작을 사용할 수 없다.
브라우저에서 실행할 수 없기 때문에 크로스 브라우징 테스트가 불가하다.
Puppeteer는 chrome, chromium의 api를 사용해 node.js 환경에서도 브라우저 테스트를 진행한다.
ex) Mocha, Jest, Puppeteer

자바스크립트 테스트 도구

테스트에 사용되는 도구들을 크게 4가지로 분류해서 정리해본다.

Test Runner : 테스트를 구동할 수 있는 환경 제공
Testing framework : 테스트 코드 작성을 위한 기반(틀) 제공
Assertion library
Test Double library

Test Runner

테스트 파일을 읽어 작성한 코드를 실행하고, 결과를 출력한다.
파일의 변경된 사항을 자동으로 재실행하는 watcher, 특정 테스트만 실행하기, reporter를 지정해 원하는 형태로 결과를 출력하는 등의 기능을 제공한다.

브라우저 : Karma
Node.js : Jest 등등.. Node.js 기반의 테스트 러너는 러너의 실행환경과 코드의 실행환경을 구분할 필요가 없기 때문에 대부분 테스트 프레임워크와 통합된 형태로 제공된다.

Testing Framework

사용자가 테스트 코드를 작성할 수 있는 기반을 제공해주는 도구이다.
프레임워크가 제공하는 함수들을 사용해서 테스트 코드를 작성하면,
프레임워크가 테스트 코드를 자동으로 실행한 후, 성공 및 실패에 대한 결과(matchers)를 반환해준다.

ex) Jest, Mocha, Jasmine, AVA

기본적으로 에러가 발생하면 fail, 에러가 발생하지 않으면 pass
test/it: 하나의 테스트 케이스
describe/context: 여러 개의 테스트 케이스를 포함하는 그룹
beforeEach/before/after/afterEach: 테스트 실행 전/후에 공통으로 실행되는 코드 작성

describe('calculations', () => {
  let a, b;
  
  beforeEach(() => {
    a = 10;
    b = 20;
  });
  
  it('sum two number', () => {
    expect(a + b).toBe(30);
  });
  
  it('multiply two number', () => {
    expect(a * b).toBe(200);
  });
});

Assertion library

테스트 코드에서 단언(assertion)은 테스트가 통과하기 위한 조건을 명확하게 기술하기 위해 사용된다.
테스트 프레임워크에서 다양한 방식의 단언 API를 기본으로 제공하지만, mocha의 경우는 chai와 같은 별도의 단언 라이브러리를 사용하도록 권장한다.

ex) Chai
Chai 라이브러리에서는 TDD(assert), BDD(should, expect)에 따라 개발자가 편리한 assertion 스타일을 선택할 수 있다. (expect/should 차이)

mocha 와 chai 구분하기

afterEach(function() {
  $httpBackend.verifyNoOutstandingRequest();
  $window.localStorage.removeItem('com.shortly');
});

it('should have a signup method', function() {
  expect($scope.signup).to.be.a('function');
});

it 코드블럭을 기준으로 밖에서 사용되는 것이 일반적으로 테스트 프레임워크(Mocha)에서 사용할 수 있는 것이다.
- beforeEach, describe, context, it
it 코드블럭 안에서 사용되는 메서드들은 chai 에서 사용하는 코드이다.
- expect, equal, exist 등등

Test Double library

테스트 더블

테스트를 하기 위해 실제 코드 대신에 사용하는 객체/함수

독립적이고 분리된 단위 테스트를 위해 외부 의존성을 임의로 주입할 때 사용한다.

dummy, fake, stub, mock, spy 등을 통칭한다.

테스트 더블 라이브러리는 테스트 더블을 쉽게 만들 수 있도록 도와주는 라이브러리로
assertion 라이브러리와 마찬가지로 테스트 더블을 위한 함수들도 테스트 프레임워크에서 기본으로 제공되는 경우가 대부분이며, mocha의 경우에만 Sinon.JS 등의 별도 라이브러리를 사용하도록 권장한다.

Jest에서는 모듈단위로 테스트 더블을 사용할 수 있는 기능을 제공한다.
Jasmine의 Clock이나 Sinon.JS의 Lolex와 같은 도구를 사용하면 JS의 타이머 api도 직접 제어하며 테스트할 수 있다.
Axios와 같은 유명 라이브러리도 별도로 구현된 mock 라이브러리를 쉽게 찾을 수 있으므로, 관련된 라이브러리가 있는지 검색해보는 걸 추천한다.
Sinon, MSW(Mock Service Worker; API Mocking 라이브러리)