테스트 자동화와 Mocha

켄·2023년 1월 16일

Javascript(ES6)

출처: 모던 자바스크립트 참고 자료

테스트는 왜 해야하는가?

각 유즈 케이스를 생각하며 코드를 작성하게 되는데, 수많은 케이스를 상기하면서 코드를 수정하는 것은 거의 불가능에 가깝기 때문이다.

Behavior Driven Development(BDD)

BDD는 테스트(test), 문서(documentation), 예시(example)를 한데 모아놓은 개념입니다.

스펙 작성 방법

먼저, 코드가 무슨 일을 하는지 상상한 후 이를 자연어로 표현해야 합니다.

이때, 만들어진 산출물을 BDD에선 명세서(specification) 또는 짧게 줄여 스펙(spec) 이라고 부릅니다. 명세서엔 아래와 같이 유스 케이스에 대한 자세한 설명과 테스트가 담겨있습니다.

명세서는 실행 가능합니다. 명세서를 실행하면 it 블록 안의 테스트가 실행됩니다.

<script>
// 거듭제곱 함수
describe("pow", function() {

  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });

});
</script>

스펙의 주요 구성 요소 3가지

describe("title", function() { ... })
구현하고자 하는 기능에 대한 설명이 들어갑니다. 우리 예시에선 함수 pow가 어떤 동작을 하는지에 대한 설명이 들어갈 겁니다. it 블록을 한데 모아주는 역할도 합니다.
it("유스 케이스 설명", function() { ... })
it의 첫 번째 인수엔 특정 유스 케이스에 대한 설명이 들어갑니다. 이 설명은 누구나 읽을 수 있고 이해할 수 있는 자연어로 적어줍니다. 두 번째 인수엔 유스 케이스 테스트 함수가 들어갑니다.
assert.equal(value1, value2)
기능을 제대로 구현했다면 it 블록 내의 코드 assert.equal(value1, value2)이 에러 없이 실행됩니다.
함수 assert.*는 pow가 예상한 대로 동작하는지 확인해줍니다.
위 예시에선 assert.equal이 사용되었는데, 이 함수는 인수끼리 동등 비교했을 때 다르다고 판단되면 에러를 반환합니다. 예시에선 pow(2, 3)의 결괏값과 8을 비교합니다.

스펙 실행하기

총 2개의 라이브러리를 사용해 테스트를 진행해보겠습니다.

Mocha – 핵심 테스트 프레임워크로, describe, it과 같은 테스팅 함수와 테스트 실행 관련 주요 함수를 제공합니다.
Chai – 다양한 assertion을 제공해 주는 라이브러리입니다. 우리 예시에선 assert.equal 정도만 사용해 볼 예정입니다.
Sinon – 함수의 정보를 캐내는 데 사용되는 라이브러리로, 내장 함수 등을 모방합니다.

세 라이브러리 모두, 브라우저나 서버 사이드 환경을 가리지 않고 사용 가능합니다. 여기선 브라우저 환경을 가정하고 사용해 보겠습니다.

test.js

<script>
// 거듭제곱 함수
describe("pow", function() {

  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });

});
</script>

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- 결과 출력에 사용되는 mocha css를 불러옵니다. -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
  <!-- Mocha 프레임워크 코드를 불러옵니다. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
  <script>
    mocha.setup('bdd'); // 기본 셋업
  </script>
  <!-- chai를 불러옵니다 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <script>
    // chai의 다양한 기능 중, assert를 전역에 선언합니다.
    let assert = chai.assert;
  </script>
</head>

<body>

  <script>
    function pow(x, n) {
  		return 8; // 항상 8을 반환하도록 해놨습니다.
}
  </script>

  <!-- 테스트(describe, it...)가 있는 스크립트를 불러옵니다. -->
  <script src="test.js"></script>

  <!-- 테스트 결과를 id가 "mocha"인 요소에 출력하도록 합니다.-->
  <div id="mocha"></div>

  <!-- 테스트를 실행합니다! -->
  <script>
    mocha.run();
  </script>
</body>

</html>

<head> – 테스트에 필요한 서드파티 라이브러리와 스타일을 불러옴
<script> – 테스트할 함수(pow)의 코드가 들어감
테스트 – describe("pow", ...)를 외부 스크립트(test.js)에서 불러옴
HTML 요소 \<div id="mocha"> – Mocha 실행 결과가 출력됨
mocha.run() – 테스트를 실행시켜주는 명령어

지금은 함수 pow가 항상 8을 반환하도록 해놨기 때문에 테스트를 통과합니다.

스펙 개선하기

스펙에 테스트를 추가하는 방법

pow(3, 4) = 81을 만족하는지 확인하는 테스트를 추가해 보겠습니다.
⚠️테스트 하나에선 한 가지만 확인하는게 좋습니다(it을 분리해서 작성)

<script>
describe("pow", function() {

  it("2를 세 번 곱하면 8입니다.", function() {
    assert.equal(pow(2, 3), 8);
  });

  it("3을 네 번 곱하면 81입니다.", function() {
    assert.equal(pow(3, 4), 81);
  });

});
</script>

함수는 항상 8을 반환하고 있기 때문에 두번째 테스트를 통과할 수 없습니다.
제대로 작동시키기 위해선 코드를 아래와 같이 작성해야 합니다.

<script>
 function pow(x, n) {
  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}
</script>

before/after와 beforeEach/afterEach

대개 초기화 용도로 사용됩니다.
카운터 변수를 0으로 만들거나 테스트가 바뀔 때(또는 테스트 그룹이 바뀔 때)마다 해줘야 하는 작업이 있으면 이들을 이용할 수 있습니다

<script>
describe("test", function() {

  before(() => alert("테스트를 시작합니다 - 테스트가 시작되기 전"));
  after(() => alert("테스트를 종료합니다 - 테스트가 종료된 후"));

  beforeEach(() => alert("단일 테스트를 시작합니다 - 각 테스트 시작 전"));
  afterEach(() => alert("단일 테스트를 종료합니다 - 각 테스트 종료 후"));

  it('test 1', () => alert(1));
  it('test 2', () => alert(2));

});
</script>

함수 before는 (전체) 테스트가 실행되기 전에 실행되고, 함수 after는 (전체) 테스트가 실행된 후에 실행됩니다.
함수 beforeEach는 매 it이 실행되기 전에 실행되고, 함수 afterEach는 매 it이 실행된 후에 실행됩니다.

실행 결과

테스트를 시작합니다 - 테스트가 시작되기 전 (before)
단일 테스트를 시작합니다 - 각 테스트 시작 전 (beforeEach)
1
단일 테스트를 종료합니다 - 각 테스트 종료 후 (afterEach)
단일 테스트를 시작합니다 - 각 테스트 시작 전 (beforeEach)
2
단일 테스트를 종료합니다 - 각 테스트 종료 후 (afterEach)
테스트를 종료합니다 - 테스트가 종료된 후 (after)

Chai의 다양한 assertion

assert.isNaN - NaN인지 아닌지를 확인해줍니다.
assert.equal(value1, value2) – value1과 value2의 동등성을 확인합니다.
(value1 == value2)
assert.strictEqual(value1, value2) – value1과 value2의 일치성을 확인합니다.
(value1 === value2)
assert.notEqual, assert.notStrictEqual – 비 동등성, 비 일치성을 확인합니다.
assert.isTrue(value) – value가 true인지 확인합니다.
(value === true)
assert.isFalse(value) – value가 false인지 확인합니다.
(value === false)