프론트엔드 개발자가 알아야 할 ‘유닛 테스트’ 작성법

// 계좌 번호를 받아 잔액을 조회하는 함수입니다. 
// 우리는 이 함수가 항상 올바르게 잔액을 조회하는지 확인하고 싶습니다. 
function getBalanceOfAccount(accountNumber) { 
  const balance = server.getBalanceByAccount(accountNumber); 
  
  return balance; 
} 
function isBalanceEnough(moneyToSend, balance) { 
  return moneyToSend <= balance; 
} 
// 원하는 금액만큼 송금하고자 합니다. 
function transferMoney(amount, myAccount, accountToSend) { 
  if (isBalanceEnough(amount, getBalanceOfAccount(myAccount))) {
    // 충분한 잔액이 있는 경우에만 송금합니다. 
  } else { 
    …
  }
}

// moneyToSend와 balance는 모두 숫자형 자료입니다. 
// 두 수의 크기를 비교하는 함수에 임의의 숫자 두 개를 전달하면 결과는 항상 동일하게 나옵니다. 
function isBalanceEnough(moneyToSend, balance) { 
  return moneyToSend <= balance; 
}

// 송금을 마친 뒤에 실행하는 completeMoneyTransfer 함수는 송금액과 계좌의 직전 잔액을 인자로 받습니다. 
// 송금 후에 계좌의 잔액을 변경하는 로직을 수행하고 있습니다. 
// completeMoneyTransfer 함수 입장에서는 account의 정보를 함수 외부에서 가져오고 있는 모습인데 
// 이 경우는 account를 사용하는 다른 곳에서 의도하지 않은 결과를 낳을 수 있기에 
// completeMoneyTransfer 함수는 순수하지 않다고 표현합니다. 
function completeMoneyTransfer(moneyToSend, previousBalance) {
  account.setBalanace(previousBalance - moneyToSend); 
}

let externalBalance = 1000; 
function isBalanceEnough(moneyToSend, balance) { 
  return moneyToSend <= balance; 
} 
function transferMoney(amount, myAccount, accountToSend) { 
  // 여기서 외부 스코프의 externalBalance 값을 참조하고 있습니다.
  // externalBalance의 값은 외부에 선언이 되어 있어 누구나 변경이 가능한 상태입니다.
  // 외부에서 선언되고 변경이 가능한 변수를 사용하고 있으므로
  // transferMoney는 externalBalance에 의존하게 되는 코드가 생겼습니다.
  // 이 경우 사이드 이펙트의 가능성이 높아졌기에 transferMoney는 순수하지 않다고 표현합니다.
  if (isBalanceEnough(amount, externalBalance)) {
    // 충분한 잔액이 있는 경우에만 송금합니다. 
    // ... 
  } else { 
    // ... 
  } 
}

// 송금 수수료 할인 혜택을 위해 사용하는 함수입니다.
// 할인율을 만드는 과정에서 임의의 난수를 생성하고 있고 이는 결괏값에 영향을 주게 됩니다.
// 이러한 경우는 calculateTransferFeeReduction 함수에 동일한 인자를 전달하더라도
// 결괏값이 달라질 수 있음을 뜻합니다. 
  function calculateTransferFeeReduction(transferAmount) {
    // 1%에서 10% 사이의 난수 생성
    const reductionRate = (Math.floor(Math.random() * 10) + 1) / 100; 
    return transferAmount * reductionRate; 
}

function getBoyscouts(students) { 
  return students.filter(student => student.isBoyscout); 
}

// 책의 목차 중 주제에 해당합니다.
// 테스트 코드가 어떤 것을 테스트하는지 알려주는 부분으로 간략하게 작성하셔도 됩니다.
describe("보이스카웃 학생을 구하는 함수 테스트", () => { 
  // 테스트 블록은 중첩으로 작성이 가능합니다.
  // 중첩된 테스트 블록에선 보다 상세한 내용을 적어주는 것이 좋습니다.
  // getBoyscouts 함수를 테스트하는데 그중 어떤 카테고리/주제에 대한 테스트가 모여있는지 알 수 있게 말이에요.
  describe("재학생의 경우", () => { 
    // test, it 중 하나로 작성하실 수 있고 각 항목당 하나의 테스트 케이스로 등록이 되는 부분입니다.
    // 이 부분은 "A를 만족하면 B를 반환한다"와 같이 하나의 기능만을 명확하게 작성해 주시는 것이 중요합니다.
    it("보이스카웃의 가입한 학생의 목록을 반환한다.", () => { 
      // 테스트는 Given-When-Then의 순서를 따라 작성하시는 것을 추천드립니다.
      // 단계별로 목적이 있어 코드 가독성을 올릴 수 있고 유지 보수성을 증가시킵니다.
      // Given - 테스트에 사용할 데이터를 준비하는 단계입니다.
      const students = [...];
      // When - 선언한 데이터를 사용해 테스트 대상 함수를 실행합니다.
      const boyscouts = getBoyscouts(students);
      // Then - 테스트 대상이 되는 함수를 실행한 결과가 기대한 결과와 일치하는지 확인하는 구간입니다.
      boyscouts.forEach(boyscout => {
        // boyscouts에 포함된 학생은 모두 isBoyscout이 true를 보장해야 합니다.
        expect(boyscout.isBoyscout).toBe(true);
      });
    }) 
  }) 
})

function getBalanceOfAccount(accountNumber) { 
  const balance = server.getBalanceByAccount(accountNumber); 
  return balance; 
}

describe('잔액 조회 테스트', () => { 
  it('계좌의 현재 잔액을 반환한다.', () => {
    // Given const accountNumber = "110-xxx-2345";
    // When
    const balance = getBalanceOfAccount(accountNumber);
    // Then 
    // 검증: 특정 시점의 잔액을 예상할 수 없으므로 일관된 결과를 보장하기 어렵습니다.
    // 예상 결과는 외부 시스템의 상태에 따라 달라질 수 있습니다. 
    expect(balance).toBe(/* 어떤 특정 값 */); 
  })
})

// accountNumber를 받아 서버에 전달하는 과정을 거치지 않고 
// 이미 잔액 계좌의 완료된 계좌 정보를 받아 그 안의 잔액만을 반환하도록 수정했습니다. 
function getBalanceOfAccount(accountInfo) { 
  return accountInfo.balance; 
}

// 현재 원화 대비 달러의 환율 정보 
let currentExchangeRate = 1200; 
// 환율을 업데이트하는 함수입니다. 
function updateExchangeRate(newRate) { 
  // 외부 스코프의 값을 변경하고 있습니다. 
  // 그래서 현재 updateExchangeRate는 순수 함수가 아닙니다. 
  currentExchangeRate = newRate; 
} 
// 환전을 계산하는 함수입니다. 
function convertUSDToKRW(usd) {
  return usd * currentExchangeRate; 
}

describe('환전 함수 테스트', () => { 
  let currentExchangeRate = 1200;
  
  describe("환율이 변경되기 전", () => {
    it("100달러를 환전하면 120,000원을 받는다.", () => {
      // Given
      const usd = 100;
  
      // When
      const krw = convertUSDToKRW(usd);
      // Then
      expect(krw).toBe(120000);
    })
  })
  describe("환율이 변경된 후", () => {
    // beforeAll 은 test 또는 it으로 작성된 모든 테스트 케이스가 실행되기 전에 한 번만 실행되는 영역입니다.
    beforeAll(() => {
      // 환율이 1:1200이었던 것을 1:1000으로 변경하였습니다.
      // 하지만 convertUSDToKRW 함수는 이 사실을 알지 못하고 문제는 여기에서 발생합니다.
        updateExchangeRate(1000);
    })
    // 테스트 블록에 해당하는 describe에서 이미 환율이 변경되었음을 알리고 있지만 
    // convertUSDToKRW는 아직 이 사실을 알지 못합니다.
    it("100달러를 환전하면 100,000원을 받는다.", () => {
      // Given
      const usd = 100;
      // When
      const krw = convertUSDToKRW(usd);
      // Then
      expect(krw).toBe(100000);
    })
  })
})

describe('환전 함수 테스트', () => {
  let currentExchangeRate = 1200;
  describe("환율이 변경된 후", () => {
    beforeAll(() => {
      currentExchangeRate = 900;
    })
    it("100달러를 환전하면 90,000원을 받는다.", () => {
      // Given
      const usd = 100;
      // When
      const krw = convertUSDToKRW(usd);
      // Then
      expect(krw).toBe(90000);
    })
  })
  describe("환율이 변경되기 전", () => {
    // 이제 이 테스트는 실패합니다.
    it("100달러를 환전하면 120,000원을 받는다.", () => {
      // Given
      const usd = 100;
      // When
      const krw = convertUSDToKRW(usd);
      // Then
      expect(krw).toBe(120000);
    })
  })
  describe("환율이 변경된 후", () => {
    /* 위의 예시와 코드 동일 ... */
  })
})

function convertUSDToKRW(usd, exchangeRate) { 
  return usd * exchangeRate; 
}

describe('환전 함수 테스트', () => {
  it("100달러를 1:1200 환율로 환전하면 120,000원을 받는다.", () => {
    // Given
    const usd = 100;
    const exchangeRate = 1200;
    // When
    const krw = convertUSDToKRW(usd, exchangeRate);
    // Then
    expect(krw).toBe(120000);
  });
  it("100달러를 1:1000 환율로 환전하면 100,000원을 받는다.", () => { 
    // Given
    const usd = 100;
    const exchangeRate = 1000;
    // When
    const krw = convertUSDToKRW(usd, exchangeRate);
    // Then
    expect(krw).toBe(100000);
  });
  it("100달러를 1:900 환율로 환전하면 90,000원을 받는다.", () => {
    // Given
    const usd = 100;
    const exchangeRate = 900;
    // When
    const krw = convertUSDToKRW(usd, exchangeRate);
    // Then
    expect(krw).toBe(90000);
  });
});

// 한국의 은행이 현재 이용 가능한 시간인지 확인하는 함수입니다. 
function isBankingHour() { 
  const now = new Date(); 
  const hour = now.getHours(); 
  // 오전 9시부터 오후 5시까지 은행 업무 가능 
  return hour >= 9 && hour < 17;
}

describe('은행 업무 시간 판단 함수 테스트', () => {
  beforeAll(() => {
    // useFakerTimer는 setTimer, Date 등 시간과 관련된 값을 임의로 조작할 수 있는 매우 유용한 함수입니다.
    jest.useFakeTimers();
  })
  describe("한국에서 실행한 경우", () => {
    beforeAll(() => {
      // 한국 시간대 - 오전 10시
      // setSystemTime 은 임의로 시간을 설정할 수 있는 Jest 함수입니다.
      // useFakeTimer 함수를 사용하고 이 함수를 사용하면 원하는 시간대로 조작할 수 있습니다. 
      jest.setSystemTime(new Date('2023-01-01T10:00:00+09:00'));
    })
    it("한국에서는 현재 은행을 이용할 수 있다.", () => {
      // Given - 없으면 생략 가능합니다.
      // When
      const isAvailable = isBankingHour();
      // Then
      expect(isAvailable).toBe(true);
    })
  })
  describe("유럽에서 실행한 경우", () => {
    beforeAll(() => {
      // 유럽 시간대 - 오전 10시
      // 한국은 오후 6시
      jest.setSystemTime(new Date('2023-01-01T10:00:00+01:00'));
    })
    it("유럽에서는 현재 은행을 이용할 수 있다.", () => {
      // Given - 없으면 생략 가능합니다.
      // When
      const isAvailable = isBankingHour();
      // Then
      expect(isAvailable).toBe(true);
    })
  })
});

function isBankingHour(currentTime) { 
  const hour = currentTime.getHours(); 
  return hour >= 9 && hour < 17; 
}

describe('은행 업무 시간 판단 함수 테스트', () => {
  describe("한국에서 실행한 경우", () => {
    it("한국에서는 오전 10시에 은행을 이용할 수 있다.", () => {
      const currentTime = new Date('2023-01-01T10:00:00+09:00');
      const isAvailable = isBankingHour(currentTime);
      expect(isAvailable).toBe(true);
    });
  });
  describe("유럽에서 실행한 경우", () => {
    it("유럽에서는 오전 10시에 은행을 이용할 수 없다.", () => {
      // 시간대는 여전히 유럽 시간대지만
      // isBankingHour는 여기서 시간만을 추출하기에 오후 6시를 얻어낼 수 있습니다.
      const currentTime = new Date('2023-01-01T10:00:00+01:00');
      const isAvailable = isBankingHour(currentTime);
      // 한국 시간으로 오후 6시이므로 은행 업무 시간이 아니고 결과는 false로 변경되었습니다.
      expect(isAvailable).toBe(false);
    });
  });
});

function withdraw(amount, account) { 
  // 계좌에서 일정 금액을 출금하는 메소드를 호출하고 있습니다.
  const updatedAccount = account.withdraw(amount);
  // 출금을 완료하면 현재 시간으로 출금 기록을 시스템에 남깁니다.
  logAccountActivity(updatedAccount, new Date());
  return updatedAccount;
} 
// 시스템에 로그를 남기는 함수입니다.
function logAccountActivity(account, date) {
  // 현재 시간의 타임스탬프
  const timestamp = date.getTime();
  console.log(`계좌 활동: ${account.id}, 타임스탬프: ${timestamp}`); 
}

describe('로깅 함수 테스트', () => {
  beforeEach(() => {
    // jest.fn 함수는 undefined를 반환하는 빈 함수로 Jest에서 제공하는 모킹 함수입니다.
    // 이 함수를 사용하게 되면 함수가 몇 번 호출되었는지, 어떤 인자 값을 전달받았는지 등을 확인할 수 있습니다.
    // console.log 호출을 가로채기 위해 함수를 모킹합니다.
    console.log = jest.fn();
  });
  // 로깅 간격을 5분이라고 가정해 보겠습니다.
  // 5분이 지나기 전에 로깅 함수가 실행되면 이전의 로그 기록으로 출력하는 함수라고 해보겠습니다.
  // 시간에 대한 처리는 따로 하지 않았기 때문에 
  // 출금 함수 withdraw에서 계좌 잔액이 처리되는 부분은 이 테스트에선 제외하고 살펴보겠습니다.
  it('출금을 시도하면 시스템에 로그를 남긴다.', () => {
    // Given
    const amount = 500; 
    const account = { number: '123456', withdraw: jest.fn() };
    const date = new Date();
    // When
    withdraw(amount, account)
    // Then
    expect(console.log).toHaveBeenNthCalledWith(1, `계좌 활동: 123456, 타임스탬프: ${date.getTime()}`);
  });
});