🎯 왜 테스트 코드를 작성해야 할까?

안녕! 오늘은 JavaScript 개발자라면 반드시 알아야 할 테스팅에 대해 이야기해볼게. 😊

솔직히 말하면, 처음 프로그래밍을 배울 때는 "테스트 코드? 그거 왜 써야 해? 그냥 실행해보면 되잖아!"라고 생각했던 적 있지 않아? 나도 그랬어. 근데 프로젝트가 커지고, 협업을 하게 되면서 테스트 코드의 중요성을 뼈저리게 느끼게 됐지.

테스트 코드는 마치 안전벨트 같은 거야. 당장은 불편하고 귀찮아 보이지만, 위험한 순간이 왔을 때 너를 지켜주는 생명줄이 되거든. 🚗💨

🔍 단위 테스트(Unit Test)란?

테스트에는 여러 종류가 있어. 단위 테스트(Unit Test), 통합 테스트(Integration Test), E2E 테스트(End-to-End Test) 등등. 그중에서 단위 테스트는 가장 기본이 되는 테스트야.

단위 테스트는 말 그대로 코드의 가장 작은 단위(주로 함수나 메서드)를 테스트하는 거야. 예를 들어, 두 숫자를 더하는 함수가 있다면, 그 함수에 여러 입력값을 넣어보고 예상한 결과가 나오는지 확인하는 거지.

간단한 예시를 볼까? 🤔

// 테스트할 함수
function add(a, b) {
  return a + b;
}

// 단위 테스트 (개념적 예시)
테스트: "add 함수는 두 숫자를 더한다"
  입력: add(2, 3)
  예상 결과: 5
  실제 결과: 5
  ✅ 통과!

테스트: "add 함수는 음수도 처리한다"
  입력: add(-1, 1)
  예상 결과: 0
  실제 결과: 0
  ✅ 통과!

이렇게 각 함수의 동작을 세밀하게 검증하는 게 단위 테스트야. 간단하지? 😊

🎭 Jest vs Mocha: 어떤 걸 선택해야 할까?

JavaScript 테스팅 세계에는 여러 프레임워크가 있지만, Jest와 Mocha가 가장 인기 있어. 둘 다 훌륭한 도구인데, 각각의 특징이 달라서 프로젝트 상황에 맞게 선택하면 돼.

먼저 각각의 특징을 살펴보자! 🔎

🚀 Jest 시작하기: 설치부터 첫 테스트까지

자, 이제 본격적으로 Jest를 사용해보자! Jest는 정말 시작하기 쉬워. 😎

프로젝트 폴더에서 터미널을 열고 다음 명령어를 입력해:

# npm을 사용하는 경우
npm install --save-dev jest

# yarn을 사용하는 경우
yarn add --dev jest

--save-dev 옵션은 개발 의존성으로 설치한다는 뜻이야. 테스트 도구는 실제 배포할 때는 필요 없으니까!

package.json 파일을 열어서 scripts 부분에 테스트 명령어를 추가해:

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

이제 npm test 명령어로 테스트를 실행할 수 있어! 🎉

간단한 함수와 테스트를 작성해보자. 먼저 테스트할 함수를 만들어:

// math.js
function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    throw new Error('0으로 나눌 수 없습니다!');
  }
  return a / b;
}

module.exports = { sum, subtract, multiply, divide };

이제 테스트 파일을 만들어. Jest는 .test.js 또는 .spec.js 확장자를 가진 파일을 자동으로 찾아:

// math.test.js
const { sum, subtract, multiply, divide } = require('./math');

describe('수학 함수 테스트', () => {
  
  test('2 + 3은 5이다', () => {
    expect(sum(2, 3)).toBe(5);
  });
  
  test('5 - 2는 3이다', () => {
    expect(subtract(5, 2)).toBe(3);
  });
  
  test('4 * 3은 12이다', () => {
    expect(multiply(4, 3)).toBe(12);
  });
  
  test('10 / 2는 5이다', () => {
    expect(divide(10, 2)).toBe(5);
  });
  
  test('0으로 나누면 에러가 발생한다', () => {
    expect(() => divide(10, 0)).toThrow('0으로 나눌 수 없습니다!');
  });
  
});

터미널에서 다음 명령어를 입력해:

npm test

그러면 이런 결과가 나올 거야:

PASS  ./math.test.js
  수학 함수 테스트
    ✓ 2 + 3은 5이다 (3ms)
    ✓ 5 - 2는 3이다 (1ms)
    ✓ 4 * 3은 12이다
    ✓ 10 / 2는 5이다
    ✓ 0으로 나누면 에러가 발생한다 (2ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        1.234s

모든 테스트가 통과했어! 🎊 초록색 체크 마크가 보이면 성공이야.

🎨 Jest의 주요 Matcher 알아보기

Jest는 다양한 matcher를 제공해서 여러 상황을 테스트할 수 있어. 자주 사용하는 matcher들을 알아보자! 📚

실제 사용 예시를 더 볼까? 🤓

// user.test.js
describe('사용자 객체 테스트', () => {
  
  const user = {
    name: '김코딩',
    age: 25,
    email: 'coding@example.com',
    hobbies: ['독서', '코딩', '운동']
  };
  
  test('사용자 이름이 올바르다', () => {
    expect(user.name).toBe('김코딩');
  });
  
  test('사용자 객체가 올바른 구조를 가진다', () => {
    expect(user).toEqual({
      name: '김코딩',
      age: 25,
      email: 'coding@example.com',
      hobbies: ['독서', '코딩', '운동']
    });
  });
  
  test('나이가 20보다 크다', () => {
    expect(user.age).toBeGreaterThan(20);
  });
  
  test('취미 배열에 "코딩"이 포함된다', () => {
    expect(user.hobbies).toContain('코딩');
  });
  
  test('취미가 3개다', () => {
    expect(user.hobbies).toHaveLength(3);
  });
  
  test('이메일 형식이 올바르다', () => {
    expect(user.email).toMatch(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
  });
  
});

⏱️ 비동기 코드 테스트하기

실제 개발에서는 API 호출, 데이터베이스 쿼리 같은 비동기 작업이 많아. Jest에서 비동기 코드를 테스트하는 방법을 알아보자! 🌐

// api.js
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id === 1) {
        resolve({ id: 1, name: '김코딩' });
      } else {
        reject(new Error('사용자를 찾을 수 없습니다'));
      }
    }, 100);
  });
}

module.exports = { fetchUser };

// api.test.js
const { fetchUser } = require('./api');

describe('API 테스트', () => {
  
  // 방법 1: return 사용
  test('사용자 정보를 가져온다 (return)', () => {
    return fetchUser(1).then(user => {
      expect(user.name).toBe('김코딩');
    });
  });
  
  // 방법 2: async/await 사용 (추천!)
  test('사용자 정보를 가져온다 (async/await)', async () => {
    const user = await fetchUser(1);
    expect(user.name).toBe('김코딩');
  });
  
  // 에러 테스트
  test('존재하지 않는 사용자는 에러를 던진다', async () => {
    await expect(fetchUser(999)).rejects.toThrow('사용자를 찾을 수 없습니다');
  });
  
  // resolves matcher 사용
  test('사용자 정보를 가져온다 (resolves)', async () => {
    await expect(fetchUser(1)).resolves.toEqual({
      id: 1,
      name: '김코딩'
    });
  });
  
});

setTimeout이나 setInterval을 사용하는 코드는 어떻게 테스트할까? Jest의 타이머 모킹 기능을 사용하면 돼!

// timer.js
function delayedGreeting(name, callback) {
  setTimeout(() => {
    callback(`안녕하세요, ${name}님!`);
  }, 1000);
}

module.exports = { delayedGreeting };

// timer.test.js
const { delayedGreeting } = require('./timer');

describe('타이머 테스트', () => {
  
  beforeEach(() => {
    jest.useFakeTimers(); // 가짜 타이머 사용
  });
  
  afterEach(() => {
    jest.useRealTimers(); // 실제 타이머로 복원
  });
  
  test('1초 후에 인사 메시지를 보낸다', () => {
    const callback = jest.fn(); // 모킹된 함수
    
    delayedGreeting('김코딩', callback);
    
    // 아직 실행 안 됨
    expect(callback).not.toHaveBeenCalled();
    
    // 1초 경과
    jest.advanceTimersByTime(1000);
    
    // 이제 실행됨!
    expect(callback).toHaveBeenCalledWith('안녕하세요, 김코딩님!');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  
});

jest.useFakeTimers()를 사용하면 실제로 1초를 기다릴 필요 없이 jest.advanceTimersByTime()으로 시간을 건너뛸 수 있어! 테스트가 엄청 빨라지지. ⚡

🎭 Mock 함수와 Spy 활용하기

테스트를 작성하다 보면 외부 의존성(API, 데이터베이스, 다른 모듈 등)을 가진 코드를 만나게 돼. 이럴 때 Mock을 사용하면 실제 의존성 없이도 테스트할 수 있어! 🎪

describe('Mock 함수 기본', () => {
  
  test('Mock 함수는 호출을 추적한다', () => {
    const mockFn = jest.fn();
    
    mockFn('hello');
    mockFn('world');
    
    // 호출 횟수 확인
    expect(mockFn).toHaveBeenCalledTimes(2);
    
    // 특정 인자로 호출되었는지 확인
    expect(mockFn).toHaveBeenCalledWith('hello');
    expect(mockFn).toHaveBeenCalledWith('world');
  });
  
  test('Mock 함수는 반환값을 설정할 수 있다', () => {
    const mockFn = jest.fn();
    
    mockFn.mockReturnValue('모킹된 값');
    
    expect(mockFn()).toBe('모킹된 값');
  });
  
  test('Mock 함수는 여러 반환값을 설정할 수 있다', () => {
    const mockFn = jest.fn();
    
    mockFn
      .mockReturnValueOnce('첫 번째')
      .mockReturnValueOnce('두 번째')
      .mockReturnValue('기본값');
    
    expect(mockFn()).toBe('첫 번째');
    expect(mockFn()).toBe('두 번째');
    expect(mockFn()).toBe('기본값');
    expect(mockFn()).toBe('기본값');
  });
  
  test('Mock 함수는 구현을 제공할 수 있다', () => {
    const mockFn = jest.fn(x => x * 2);
    
    expect(mockFn(5)).toBe(10);
    expect(mockFn).toHaveBeenCalledWith(5);
  });
  
});

실제 프로젝트에서는 외부 모듈을 모킹해야 할 때가 많아. 예를 들어, axios 같은 HTTP 클라이언트를 모킹해보자:

// userService.js
const axios = require('axios');

async function getUserById(id) {
  const response = await axios.get(`https://api.example.com/users/${id}`);
  return response.data;
}

async function createUser(userData) {
  const response = await axios.post('https://api.example.com/users', userData);
  return response.data;
}

module.exports = { getUserById, createUser };

// userService.test.js
const axios = require('axios');
const { getUserById, createUser } = require('./userService');

// axios 모듈 전체를 모킹
jest.mock('axios');

describe('사용자 서비스 테스트', () => {
  
  afterEach(() => {
    jest.clearAllMocks(); // 각 테스트 후 모킹 초기화
  });
  
  test('사용자 정보를 가져온다', async () => {
    const mockUser = { id: 1, name: '김코딩', email: 'test@example.com' };
    
    // axios.get이 반환할 값 설정
    axios.get.mockResolvedValue({ data: mockUser });
    
    const user = await getUserById(1);
    
    expect(user).toEqual(mockUser);
    expect(axios.get).toHaveBeenCalledWith('https://api.example.com/users/1');
    expect(axios.get).toHaveBeenCalledTimes(1);
  });
  
  test('사용자를 생성한다', async () => {
    const newUser = { name: '박개발', email: 'dev@example.com' };
    const createdUser = { id: 2, ...newUser };
    
    axios.post.mockResolvedValue({ data: createdUser });
    
    const result = await createUser(newUser);
    
    expect(result).toEqual(createdUser);
    expect(axios.post).toHaveBeenCalledWith(
      'https://api.example.com/users',
      newUser
    );
  });
  
  test('API 에러를 처리한다', async () => {
    axios.get.mockRejectedValue(new Error('네트워크 에러'));
    
    await expect(getUserById(1)).rejects.toThrow('네트워크 에러');
  });
  
});

☕ Mocha 시작하기: 유연한 테스팅의 세계

이제 Mocha를 알아볼 차례야! Mocha는 Jest보다 설정이 좀 더 필요하지만, 그만큼 자유도가 높아. 🎨

Mocha는 assertion 라이브러리가 내장되어 있지 않아서 별도로 설치해야 해. 가장 인기 있는 조합은 Mocha + Chai야:

# Mocha와 Chai 설치
npm install --save-dev mocha chai

# 코드 커버리지를 위한 nyc 설치 (선택)
npm install --save-dev nyc

package.json에 스크립트 추가:

{
  "scripts": {
    "test": "mocha",
    "test:watch": "mocha --watch",
    "test:coverage": "nyc mocha"
  }
}

// calculator.js
class Calculator {
  add(a, b) {
    return a + b;
  }
  
  subtract(a, b) {
    return a - b;
  }
  
  multiply(a, b) {
    return a * b;
  }
  
  divide(a, b) {
    if (b === 0) {
      throw new Error('Division by zero');
    }
    return a / b;
  }
}

module.exports = Calculator;

// calculator.test.js
const { expect } = require('chai');
const Calculator = require('./calculator');

describe('Calculator', () => {
  let calculator;
  
  // 각 테스트 전에 실행
  beforeEach(() => {
    calculator = new Calculator();
  });
  
  describe('add()', () => {
    it('두 숫자를 더한다', () => {
      const result = calculator.add(2, 3);
      expect(result).to.equal(5);
    });
    
    it('음수도 처리한다', () => {
      expect(calculator.add(-1, -2)).to.equal(-3);
    });
  });
  
  describe('subtract()', () => {
    it('두 숫자를 뺀다', () => {
      expect(calculator.subtract(5, 3)).to.equal(2);
    });
  });
  
  describe('multiply()', () => {
    it('두 숫자를 곱한다', () => {
      expect(calculator.multiply(4, 3)).to.equal(12);
    });
  });
  
  describe('divide()', () => {
    it('두 숫자를 나눈다', () => {
      expect(calculator.divide(10, 2)).to.equal(5);
    });
    
    it('0으로 나누면 에러를 던진다', () => {
      expect(() => calculator.divide(10, 0)).to.throw('Division by zero');
    });
  });
  
});

Chai는 세 가지 assertion 스타일을 제공해. 취향에 맞게 선택하면 돼! 😊

const { expect, assert, should } = require('chai');

describe('Chai Assertion 스타일', () => {
  
  const value = 42;
  const obj = { name: '김코딩', age: 25 };
  const arr = [1, 2, 3];
  
  describe('Expect 스타일 (가장 인기)', () => {
    it('값을 검증한다', () => {
      expect(value).to.equal(42);
      expect(value).to.be.a('number');
      expect(obj).to.have.property('name');
      expect(arr).to.include(2);
      expect(arr).to.have.lengthOf(3);
    });
  });
  
  describe('Assert 스타일 (전통적)', () => {
    it('값을 검증한다', () => {
      assert.equal(value, 42);
      assert.typeOf(value, 'number');
      assert.property(obj, 'name');
      assert.include(arr, 2);
      assert.lengthOf(arr, 3);
    });
  });
  
  describe('Should 스타일 (BDD)', () => {
    before(() => {
      should(); // should 활성화
    });
    
    it('값을 검증한다', () => {
      value.should.equal(42);
      value.should.be.a('number');
      obj.should.have.property('name');
      arr.should.include(2);
      arr.should.have.lengthOf(3);
    });
  });
  
});

개인적으로는 expect 스타일을 추천해! 가장 읽기 쉽고 직관적이거든. 📖

🔄 Mocha에서 비동기 테스트하기

Mocha도 비동기 테스트를 훌륭하게 지원해. 여러 방법이 있는데 하나씩 알아보자! ⏱️

const { expect } = require('chai');

describe('비동기 테스트 - Callback', () => {
  
  function fetchData(callback) {
    setTimeout(() => {
      callback(null, { data: 'success' });
    }, 100);
  }
  
  it('콜백으로 데이터를 받는다', (done) => {
    fetchData((err, result) => {
      expect(err).to.be.null;
      expect(result.data).to.equal('success');
      done(); // 테스트 완료를 알림
    });
  });
  
});

describe('비동기 테스트 - Promise', () => {
  
  function fetchUser(id) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ id, name: '김코딩' });
      }, 100);
    });
  }
  
  it('Promise를 반환한다', () => {
    return fetchUser(1).then(user => {
      expect(user.name).to.equal('김코딩');
    });
  });
  
});

describe('비동기 테스트 - Async/Await', () => {
  
  async function fetchUser(id) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ id, name: '김코딩' });
      }, 100);
    });
  }
  
  it('async/await으로 테스트한다', async () => {
    const user = await fetchUser(1);
    expect(user.name).to.equal('김코딩');
    expect(user.id).to.equal(1);
  });
  
  it('에러를 처리한다', async () => {
    async function failingFunction() {
      throw new Error('에러 발생!');
    }
    
    try {
      await failingFunction();
      throw new Error('에러가 발생해야 합니다');
    } catch (error) {
      expect(error.message).to.equal('에러 발생!');
    }
  });
  
});

🎭 Mocha에서 Mocking: Sinon 활용하기

Mocha는 모킹 기능이 내장되어 있지 않아서 Sinon이라는 라이브러리를 주로 사용해. Sinon은 매우 강력한 모킹 도구야! 💪

npm install --save-dev sinon

Spy는 함수 호출을 감시하는 도구야. 함수가 몇 번 호출되었는지, 어떤 인자로 호출되었는지 추적할 수 있어.

const { expect } = require('chai');
const sinon = require('sinon');

describe('Sinon Spy', () => {
  
  it('함수 호출을 추적한다', () => {
    const callback = sinon.spy();
    
    function doSomething(cb) {
      cb('hello');
      cb('world');
    }
    
    doSomething(callback);
    
    expect(callback.calledTwice).to.be.true;
    expect(callback.firstCall.args[0]).to.equal('hello');
    expect(callback.secondCall.args[0]).to.equal('world');
  });
  
  it('객체 메서드를 감시한다', () => {
    const user = {
      name: '김코딩',
      setName(newName) {
        this.name = newName;
      }
    };
    
    const spy = sinon.spy(user, 'setName');
    
    user.setName('박개발');
    
    expect(spy.calledOnce).to.be.true;
    expect(spy.calledWith('박개발')).to.be.true;
    expect(user.name).to.equal('박개발');
    
    spy.restore(); // 원래대로 복원
  });
  
});

Stub은 함수의 동작을 완전히 대체할 수 있어. 특정 값을 반환하도록 설정하거나, 에러를 던지도록 만들 수 있지.

const sinon = require('sinon');
const { expect } = require('chai');

describe('Sinon Stub', () => {
  
  it('함수의 반환값을 조작한다', () => {
    const stub = sinon.stub();
    
    stub.returns('모킹된 값');
    
    expect(stub()).to.equal('모킹된 값');
  });
  
  it('여러 반환값을 설정한다', () => {
    const stub = sinon.stub();
    
    stub.onFirstCall().returns('첫 번째');
    stub.onSecondCall().returns('두 번째');
    stub.returns('기본값');
    
    expect(stub()).to.equal('첫 번째');
    expect(stub()).to.equal('두 번째');
    expect(stub()).to.equal('기본값');
  });
  
  it('조건부 반환값을 설정한다', () => {
    const stub = sinon.stub();
    
    stub.withArgs('hello').returns('안녕!');
    stub.withArgs('bye').returns('잘가!');
    stub.returns('모르는 말');
    
    expect(stub('hello')).to.equal('안녕!');
    expect(stub('bye')).to.equal('잘가!');
    expect(stub('???')).to.equal('모르는 말');
  });
  
  it('에러를 던진다', () => {
    const stub = sinon.stub();
    
    stub.throws(new Error('에러 발생!'));
    
    expect(() => stub()).to.throw('에러 발생!');
  });
  
});

Mock은 Stub과 비슷하지만, 기대값(expectation)을 미리 설정하고 검증할 수 있어.

describe('Sinon Mock', () => {
  
  it('객체의 메서드 호출을 검증한다', () => {
    const user = {
      save() {
        return 'saved';
      }
    };
    
    const mock = sinon.mock(user);
    
    // 기대값 설정
    mock.expects('save')
      .once()
      .withArgs({ name: '김코딩' })
      .returns('success');
    
    // 실제 호출
    const result = user.save({ name: '김코딩' });
    
    expect(result).to.equal('success');
    
    // 기대값 검증
    mock.verify();
    
    // 복원
    mock.restore();
  });
  
});

📊 코드 커버리지: 테스트의 완성도 측정하기

코드 커버리지는 테스트가 코드의 얼마나 많은 부분을 실행했는지 보여주는 지표야. 100%가 목표는 아니지만, 중요한 부분이 테스트되고 있는지 확인하는 데 유용해! 📈

Jest는 코드 커버리지가 내장되어 있어서 정말 간단해:

# 커버리지 리포트 생성
npm test -- --coverage

# 또는 package.json에 스크립트 추가
"test:coverage": "jest --coverage"

실행하면 이런 결과가 나와:

--------------------------|---------|----------|---------|---------|
File                      | % Stmts | % Branch | % Funcs | % Lines |
--------------------------|---------|----------|---------|---------|
All files                 |   85.71 |    66.67 |     100 |   85.71 |
 calculator.js            |   85.71 |    66.67 |     100 |   85.71 |
--------------------------|---------|----------|---------|---------|

커버리지 임계값을 설정할 수도 있어. jest.config.js에 추가:

module.exports = {
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
};

Mocha는 nyc(Istanbul)를 사용해서 커버리지를 측정해:

# nyc 설치
npm install --save-dev nyc

# 커버리지 실행
npx nyc mocha

# 또는 package.json에 스크립트 추가
"test:coverage": "nyc mocha"

.nycrc 파일로 설정을 커스터마이징할 수 있어:

{
  "all": true,
  "include": ["src/**/*.js"],
  "exclude": ["**/*.test.js", "**/*.spec.js"],
  "reporter": ["html", "text", "lcov"],
  "check-coverage": true,
  "lines": 80,
  "functions": 80,
  "branches": 80,
  "statements": 80
}

🎯 실전 테스트 작성 팁과 베스트 프랙티스

이제 실전에서 유용한 팁들을 알아보자! 이건 내가 실제로 프로젝트하면서 배운 것들이야. 💎

테스트는 Arrange(준비) - Act(실행) - Assert(검증) 패턴으로 작성하면 읽기 쉬워:

test('사용자를 생성한다', () => {
  // Arrange: 테스트 준비
  const userData = {
    name: '김코딩',
    email: 'test@example.com'
  };
  const userService = new UserService();
  
  // Act: 실제 동작 실행
  const user = userService.createUser(userData);
  
  // Assert: 결과 검증
  expect(user.name).toBe('김코딩');
  expect(user.email).toBe('test@example.com');
  expect(user.id).toBeDefined();
});

각 테스트는 다른 테스트에 영향을 주거나 받으면 안 돼. 순서에 상관없이 실행되어야 해!

// ❌ 나쁜 예: 테스트가 서로 의존
let user;

test('사용자를 생성한다', () => {
  user = createUser({ name: '김코딩' });
  expect(user.name).toBe('김코딩');
});

test('사용자 이름을 변경한다', () => {
  user.name = '박개발'; // 이전 테스트에 의존!
  expect(user.name).toBe('박개발');
});

// ✅ 좋은 예: 각 테스트가 독립적
test('사용자를 생성한다', () => {
  const user = createUser({ name: '김코딩' });
  expect(user.name).toBe('김코딩');
});

test('사용자 이름을 변경한다', () => {
  const user = createUser({ name: '김코딩' });
  user.name = '박개발';
  expect(user.name).toBe('박개발');
});

테스트 이름만 봐도 무엇을 테스트하는지 알 수 있어야 해:

// ❌ 나쁜 예
test('test1', () => { ... });
test('works', () => { ... });

// ✅ 좋은 예
test('유효한 이메일로 사용자를 생성한다', () => { ... });
test('중복된 이메일로 사용자 생성 시 에러를 던진다', () => { ... });
test('빈 이름으로 사용자 생성 시 ValidationError를 던진다', () => { ... });

테스트가 실패했을 때 원인을 쉽게 찾을 수 있도록 하나의 개념만 테스트해:

// ❌ 나쁜 예: 여러 개를 한 번에 테스트
test('사용자 기능', () => {
  const user = createUser({ name: '김코딩' });
  expect(user.name).toBe('김코딩');
  
  user.updateEmail('new@example.com');
  expect(user.email).toBe('new@example.com');
  
  user.delete();
  expect(user.isDeleted).toBe(true);
});

// ✅ 좋은 예: 각각 분리
test('사용자를 생성한다', () => {
  const user = createUser({ name: '김코딩' });
  expect(user.name).toBe('김코딩');
});

test('사용자 이메일을 업데이트한다', () => {
  const user = createUser({ name: '김코딩' });
  user.updateEmail('new@example.com');
  expect(user.email).toBe('new@example.com');
});

test('사용자를 삭제한다', () => {
  const user = createUser({ name: '김코딩' });
  user.delete();
  expect(user.isDeleted).toBe(true);
});

정상적인 경우뿐만 아니라 예외 상황도 테스트해야 해:

describe('나눗셈 함수', () => {
  
  test('정상적인 나눗셈', () => {
    expect(divide(10, 2)).toBe(5);
  });
  
  test('0으로 나누기', () => {
    expect(() => divide(10, 0)).toThrow();
  });
  
  test('음수 나눗셈', () => {
    expect(divide(-10, 2)).toBe(-5);
  });
  
  test('소수점 나눗셈', () => {
    expect(divide(10, 3)).toBeCloseTo(3.333, 2);
  });
  
  test('매우 큰 수', () => {
    expect(divide(Number.MAX_SAFE_INTEGER, 2)).toBeDefined();
  });
  
});

반복되는 테스트 데이터는 별도로 관리하면 유지보수가 쉬워:

// testData.js
const validUser = {
  name: '김코딩',
  email: 'valid@example.com',
  age: 25
};

const invalidUsers = [
  { name: '', email: 'test@example.com', age: 25 }, // 빈 이름
  { name: '김코딩', email: 'invalid-email', age: 25 }, // 잘못된 이메일
  { name: '김코딩', email: 'test@example.com', age: -1 }, // 음수 나이
];

module.exports = { validUser, invalidUsers };

// user.test.js
const { validUser, invalidUsers } = require('./testData');

test('유효한 사용자를 생성한다', () => {
  const user = createUser(validUser);
  expect(user).toBeDefined();
});

invalidUsers.forEach((invalidUser, index) => {
  test(`잘못된 사용자 데이터 ${index + 1}`, () => {
    expect(() => createUser(invalidUser)).toThrow();
  });
});

🚀 실전 프로젝트: TODO 앱 테스트하기

이론은 충분히 배웠으니, 이제 실전 예제를 만들어보자! 간단한 TODO 앱의 테스트를 작성해볼게. 🎯

// todoService.js
class TodoService {
  constructor() {
    this.todos = [];
    this.nextId = 1;
  }
  
  addTodo(title) {
    if (!title || title.trim() === '') {
      throw new Error('제목은 필수입니다');
    }
    
    const todo = {
      id: this.nextId++,
      title: title.trim(),
      completed: false,
      createdAt: new Date()
    };
    
    this.todos.push(todo);
    return todo;
  }
  
  getTodos() {
    return [...this.todos];
  }
  
  getTodoById(id) {
    const todo = this.todos.find(t => t.id === id);
    if (!todo) {
      throw new Error('TODO를 찾을 수 없습니다');
    }
    return todo;
  }
  
  updateTodo(id, updates) {
    const todo = this.getTodoById(id);
    
    if (updates.title !== undefined) {
      if (!updates.title || updates.title.trim() === '') {
        throw new Error('제목은 필수입니다');
      }
      todo.title = updates.title.trim();
    }
    
    if (updates.completed !== undefined) {
      todo.completed = updates.completed;
    }
    
    return todo;
  }
  
  deleteTodo(id) {
    const index = this.todos.findIndex(t => t.id === id);
    if (index === -1) {
      throw new Error('TODO를 찾을 수 없습니다');
    }
    
    this.todos.splice(index, 1);
    return true;
  }
  
  getCompletedTodos() {
    return this.todos.filter(t => t.completed);
  }
  
  getActiveTodos() {
    return this.todos.filter(t => !t.completed);
  }
  
  clearCompleted() {
    const completedCount = this.getCompletedTodos().length;
    this.todos = this.getActiveTodos();
    return completedCount;
  }
}

module.exports = TodoService;

// todoService.test.js
const TodoService = require('./todoService');

describe('TodoService', () => {
  let todoService;
  
  beforeEach(() => {
    todoService = new TodoService();
  });
  
  describe('addTodo()', () => {
    test('새로운 TODO를 추가한다', () => {
      const todo = todoService.addTodo('테스트 작성하기');
      
      expect(todo).toMatchObject({
        id: 1,
        title: '테스트 작성하기',
        completed: false
      });
      expect(todo.createdAt).toBeInstanceOf(Date);
    });
    
    test('공백을 제거한다', () => {
      const todo = todoService.addTodo('  테스트 작성하기  ');
      expect(todo.title).toBe('테스트 작성하기');
    });
    
    test('빈 제목으로 추가 시 에러를 던진다', () => {
      expect(() => todoService.addTodo('')).toThrow('제목은 필수입니다');
      expect(() => todoService.addTodo('   ')).toThrow('제목은 필수입니다');
    });
    
    test('여러 TODO를 추가하면 ID가 증가한다', () => {
      const todo1 = todoService.addTodo('첫 번째');
      const todo2 = todoService.addTodo('두 번째');
      
      expect(todo1.id).toBe(1);
      expect(todo2.id).toBe(2);
    });
  });
  
  describe('getTodos()', () => {
    test('모든 TODO를 반환한다', () => {
      todoService.addTodo('첫 번째');
      todoService.addTodo('두 번째');
      
      const todos = todoService.getTodos();
      
      expect(todos).toHaveLength(2);
      expect(todos[0].title).toBe('첫 번째');
      expect(todos[1].title).toBe('두 번째');
    });
    
    test('빈 배열을 반환한다', () => {
      const todos = todoService.getTodos();
      expect(todos).toEqual([]);
    });
    
    test('원본 배열을 수정하지 않는다', () => {
      todoService.addTodo('테스트');
      const todos = todoService.getTodos();
      
      todos.push({ id: 999, title: '해킹' });
      
      expect(todoService.getTodos()).toHaveLength(1);
    });
  });
  
  describe('getTodoById()', () => {
    test('ID로 TODO를 찾는다', () => {
      const added = todoService.addTodo('테스트');
      const found = todoService.getTodoById(added.id);
      
      expect(found).toEqual(added);
    });
    
    test('존재하지 않는 ID는 에러를 던진다', () => {
      expect(() => todoService.getTodoById(999)).toThrow('TODO를 찾을 수 없습니다');
    });
  });
  
  describe('updateTodo()', () => {
    test('제목을 업데이트한다', () => {
      const todo = todoService.addTodo('원래 제목');
      
      todoService.updateTodo(todo.id, { title: '새로운 제목' });
      
      expect(todo.title).toBe('새로운 제목');
    });
    
    test('완료 상태를 업데이트한다', () => {
      const todo = todoService.addTodo('테스트');
      
      todoService.updateTodo(todo.id, { completed: true });
      
      expect(todo.completed).toBe(true);
    });
    
    test('여러 필드를 동시에 업데이트한다', () => {
      const todo = todoService.addTodo('테스트');
      
      todoService.updateTodo(todo.id, {
        title: '새 제목',
        completed: true
      });
      
      expect(todo.title).toBe('새 제목');
      expect(todo.completed).toBe(true);
    });
    
    test('빈 제목으로 업데이트 시 에러를 던진다', () => {
      const todo = todoService.addTodo('테스트');
      
      expect(() => {
        todoService.updateTodo(todo.id, { title: '' });
      }).toThrow('제목은 필수입니다');
    });
  });
  
  describe('deleteTodo()', () => {
    test('TODO를 삭제한다', () => {
      const todo = todoService.addTodo('삭제할 TODO');
      
      todoService.deleteTodo(todo.id);
      
      expect(todoService.getTodos()).toHaveLength(0);
    });
    
    test('존재하지 않는 TODO 삭제 시 에러를 던진다', () => {
      expect(() => todoService.deleteTodo(999)).toThrow('TODO를 찾을 수 없습니다');
    });
  });
  
  describe('필터링 기능', () => {
    beforeEach(() => {
      todoService.addTodo('할 일 1');
      todoService.addTodo('할 일 2');
      todoService.addTodo('할 일 3');
      
      todoService.updateTodo(1, { completed: true });
      todoService.updateTodo(3, { completed: true });
    });
    
    test('완료된 TODO만 반환한다', () => {
      const completed = todoService.getCompletedTodos();
      
      expect(completed).toHaveLength(2);
      expect(completed.every(t => t.completed)).toBe(true);
    });
    
    test('미완료 TODO만 반환한다', () => {
      const active = todoService.getActiveTodos();
      
      expect(active).toHaveLength(1);
      expect(active.every(t => !t.completed)).toBe(true);
    });
    
    test('완료된 TODO를 모두 삭제한다', () => {
      const deletedCount = todoService.clearCompleted();
      
      expect(deletedCount).toBe(2);
      expect(todoService.getTodos()).toHaveLength(1);
      expect(todoService.getTodos()[0].completed).toBe(false);
    });
  });
  
});

테스트를 실행해보면:

npm test

PASS  ./todoService.test.js
  TodoService
    addTodo()
      ✓ 새로운 TODO를 추가한다 (4ms)
      ✓ 공백을 제거한다 (1ms)
      ✓ 빈 제목으로 추가 시 에러를 던진다 (2ms)
      ✓ 여러 TODO를 추가하면 ID가 증가한다 (1ms)
    getTodos()
      ✓ 모든 TODO를 반환한다
      ✓ 빈 배열을 반환한다
      ✓ 원본 배열을 수정하지 않는다 (1ms)
    getTodoById()
      ✓ ID로 TODO를 찾는다
      ✓ 존재하지 않는 ID는 에러를 던진다 (1ms)
    updateTodo()
      ✓ 제목을 업데이트한다
      ✓ 완료 상태를 업데이트한다
      ✓ 여러 필드를 동시에 업데이트한다 (1ms)
      ✓ 빈 제목으로 업데이트 시 에러를 던진다
    deleteTodo()
      ✓ TODO를 삭제한다
      ✓ 존재하지 않는 TODO 삭제 시 에러를 던진다 (1ms)
    필터링 기능
      ✓ 완료된 TODO만 반환한다
      ✓ 미완료 TODO만 반환한다
      ✓ 완료된 TODO를 모두 삭제한다 (1ms)

Test Suites: 1 passed, 1 total
Tests:       18 passed, 18 total
Time:        1.234s

완벽해! 🎉 모든 테스트가 통과했어. 이제 이 코드를 자신 있게 리팩토링하거나 새 기능을 추가할 수 있어.

🎓 TDD(Test-Driven Development): 테스트 주도 개발

TDD는 테스트를 먼저 작성하고, 그 테스트를 통과하는 코드를 작성하는 개발 방법론이야. 처음엔 이상하게 느껴질 수 있지만, 익숙해지면 정말 강력한 도구가 돼! 🔴🟢♻️

실제 예시를 보자. 문자열을 반대로 뒤집는 함수를 TDD로 만들어볼게:

// reverse.test.js
const reverse = require('./reverse');

describe('reverse()', () => {
  test('문자열을 뒤집는다', () => {
    expect(reverse('hello')).toBe('olleh');
  });
});

이 상태에서 테스트를 실행하면? 당연히 실패해! reverse 함수가 아직 없으니까. 🔴

// reverse.js
function reverse(str) {
  return str.split('').reverse().join('');
}

module.exports = reverse;

이제 테스트를 실행하면 통과해! 🟢

describe('reverse()', () => {
  test('문자열을 뒤집는다', () => {
    expect(reverse('hello')).toBe('olleh');
  });
  
  test('빈 문자열을 처리한다', () => {
    expect(reverse('')).toBe('');
  });
  
  test('한 글자를 처리한다', () => {
    expect(reverse('a')).toBe('a');
  });
  
  test('공백을 포함한 문자열을 처리한다', () => {
    expect(reverse('hello world')).toBe('dlrow olleh');
  });
  
  test('특수문자를 처리한다', () => {
    expect(reverse('hello!')).toBe('!olleh');
  });
});

모든 테스트가 통과하네! 🎉

현재 코드는 이미 간단하지만, 만약 더 복잡했다면 이 단계에서 개선할 수 있어. 중요한 건 테스트가 계속 통과하는 상태를 유지하는 거야!

🌟 재능넷에서 테스팅 스킬 활용하기

테스팅 능력은 프로그래머로서 정말 중요한 스킬이야. 재능넷 같은 플랫폼에서 프로그래밍 재능을 거래할 때도 큰 차별화 포인트가 될 수 있어! 💼

실제로 클라이언트 입장에서 생각해봐. 두 개발자가 있는데:

개발자 A: "코드 작성해드립니다"
개발자 B: "테스트 코드가 포함된 고품질 코드를 작성해드립니다. 커버리지 80% 이상 보장"

누구한테 맡기고 싶을까? 당연히 B지! 😊

테스팅 능력은 단순히 버그를 줄이는 것 이상의 가치가 있어. 전문성과 신뢰도를 보여주는 강력한 지표가 되거든.

🎬 마무리하며

와, 정말 긴 여정이었지? 😅 우리가 함께 배운 내용을 정리해볼까:

✅ 테스트 코드의 중요성과 필요성
✅ 단위 테스트의 개념과 특징
✅ Jest의 설치, 설정, 사용법
✅ Mocha + Chai + Sinon 조합
✅ 비동기 코드 테스트 방법
✅ Mock, Stub, Spy 활용
✅ 코드 커버리지 측정
✅ 테스트 작성 베스트 프랙티스
✅ TDD 개발 방법론
✅ 실전 프로젝트 예제

테스팅은 처음엔 귀찮고 시간 낭비처럼 느껴질 수 있어. 나도 그랬거든. 하지만 프로젝트가 커지고, 협업을 하게 되면서 테스트 코드의 진가를 느끼게 됐어. 🌟

테스트 코드는 미래의 나를 위한 선물이야. 6개월 후에 내가 작성한 코드를 다시 봤을 때, 테스트가 있으면 자신 있게 수정할 수 있거든.

처음부터 완벽하게 하려고 하지 마. 작은 함수 하나부터 테스트를 작성해보고, 점점 범위를 넓혀가면 돼. 그러다 보면 어느새 테스트 작성이 자연스러워질 거야! 💪

그리고 기억해. 좋은 테스트는 좋은 코드를 만들어. 테스트하기 쉬운 코드는 보통 잘 설계된 코드거든. 테스팅을 배우면서 자연스럽게 더 나은 개발자가 되는 거지! 🚀

자, 이제 당신 차례야! 오늘 배운 내용을 바탕으로 실제 프로젝트에 테스트를 추가해봐. 처음엔 어렵겠지만, 포기하지 말고 계속 연습하면 분명 실력이 늘 거야.

화이팅! 🎉 그리고 궁금한 게 있으면 언제든 물어봐. 우리 모두 함께 성장하는 개발자가 되자! 😊