매일매일
Published 2023. 3. 30. 01:57
TDD JavaScript

1. TDD란?

TDD(Test-driven Development)는 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론입니다.

작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미합니다.

 

TDD를 사용하면 코드를 작성하기에 앞서 테스트 코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히려 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있습니다.

 

TDD의 개발주기

  1. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다.
  2. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다.
  3. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다.

1의 과정을 마치기 전에 2의 작업을 시작하지 않도록 주의해야 합니다.

또한 2를 진행할 때에는, 1의 테스트를 통과할 정도의 최소 코드만 작성해야 합니다.

 

2. 테스트 코드를 작성하는 방법

`console.log`를 통해 확인하는 것도 일종의 테스트이지만,

JavaScript 내장 기능이 아니라 테스트 프레임워크를 사용해서 테스트를 작성할 수 있습니다.

예를 들어 mocha라는 테스트 프레임워크와 chai라는 라이브러리를 사용해서 테스트 코드를 작성할 수 있습니다.

 

moach

  • it()
    Mocha에서 `it()` 함수는 테스트 케이스를 작성하는 함수입니다. `it()` 함수는 첫 번째 매개 변수로 문자열로 된 설명을 받으며, 이 설명은 해당 테스트 케이스가 어떤 동작을 수행하는지 알려줍니다. 
    두 번째 매개 변수는 해당 테스트 케이스가 포함 된 콜백 함수입니다. 이 함수에서는 코드를 실행하고 예상되는 결과를 검증합니다.
    즉, it() 함수를 사용하여 개발자는 테스트 케이스를 작성하고 실행하여 코드의 동작을 검증할 수 있습니다.
  • describe()
    Mocha에서 `describe()` 함수는 관련된 테스트 케이스를 그룹화하는 함수입니다. describe() 함수는 첫 번째 매개 변수로 문자열로 된 그룹명을 받으며, 이 그룹명은 관련된 테스트 케이스를 설명하는 데 사용됩니다. 
    두 번째 매개 변수로 해당 그룹에 포함될 테스트 케이스를 정의하는 콜백 함수를 받습니다.
    `describe()` 함수는 중첩해서 사용할 수 있으며, 이를 통해 관련된 테스트 케이스를 그룹화하고 구조적으로 표현할 수 있습니다. 
// 예를 들어 배열의 메서드를 테스트할 경우
describe('Array', function() {
let should = chai.should();
// indexOf() 테스트
  describe('#indexOf()', function() {
    it('배열에 찾는 값이 없다면 -1', function() {
      should.equal([1,2,3].indexOf(4), -1);
    
     it('배열에 찾는 값이 있다면 그 값의 인덱스 반환', function() {
     should.equal([1,2,3].indexOf(2), 1);
    });

// includes() 테스트
  describe('#includes()', function() {
    it('배열에 찾는 값이 없다면 false 반환', function() {
      should.equal([1,2,3].includes(4), false);
    
     it('배열에 찾는 값이 있다면 true 반환', function() {
     should.equal([1,2,3].includes(2), true);
    });
});

 

chai

  • assert
    입력값이 ture가 아닐 경우 에러를 발생시킵니다.
  • expect
    입력값이 예상한 값과 일치하는지 테스트 해줍니다.
  • should
    expect와 같은 기능을 하며 입력방식만 약간 다릅니다.
// 같은 의미이다
detectNetwork('6512345678901234').should.equal('Discover');

should.equal(detectNetwork('6512345678901234'), 'Discover');

expect(detectNetwork('6512345678901234')).to.equal('Discover');

 

반복문 사용해서 테스트 케이스 작성하기

카드번호가 앞 두자리가 51, 52, 53, 54, 55이라면 MasterCard를 리턴하는 detectNetwork 함수를 테스트 하고 싶다면 반복문을 사용해 테스트 케이스를 작성할 수 있습니다.

describe("MasterCard", function() {
  let expect = chai.expect;

  for(let i = 51; i <= 55; i++){
    it(`has a prefix of ${i} and a length of 16`, function() {
        should
      should.equal(detectNetwork(`${i}12345678901234`), 'MasterCard');
    });
  }
});

 

출처) 코드스테이츠 유어클래스