쉽게 이해하는 Vitest 주요 기능 완성 가이드

1. 테스트 구조화 함수들

🎓 쉬운 설명: 시험문제를 풀 때를 생각해봅시다. 큰 과목(수학)이 있고, 그 안에 중단원(도형), 소단원(삼각형)이 있는 것처럼 테스트도 비슷하게 구성합니다. 이렇게 구조를 잡으면 나중에 어떤 부분에서 문제가 있었는지 쉽게 찾을 수 있어요!

describe()

• 연관된 테스트들을 논리적으로 그룹화하는 컨테이너 함수
• 중첩 가능하여 계층적인 테스트 구조 생성 가능

describe('사용자 관리', () => {
  describe('회원가입', () => {
    // 회원가입 관련 테스트들
  });
  describe('로그인', () => {
    // 로그인 관련 테스트들
  });
});

it() / test()

• 개별 테스트 케이스를 정의하는 함수
• it()과 test()는 동일한 기능, BDD 스타일과 TDD 스타일의 차이

it('유효한 이메일로 회원가입이 성공한다', () => {
  // 테스트 로직
});

test('잘못된 비밀번호로 로그인 시 에러가 발생한다', () => {
  // 테스트 로직
});

🎓 TDD vs BDD 스타일 설명:

시험문제를 작성하는 두 가지 방식이라고 생각해보세요!

• TDD(Test-Driven Development) 스타일: "이것을 테스트한다"라는 관점

  test('비밀번호는 8자 이상이어야 한다', () => {
  	// 테스트 로직
  });
  

• BDD(Behavior-Driven Development) 스타일: "이렇게 동작해야 한다"는 관점

  it('비밀번호가 8자 미만이면 에러를 표시해야 한다', () => {
  	// 테스트 로직
  });
  

2. 검증 함수들

🎓 쉬운 설명: 선생님이 시험지를 채점할 때처럼, 우리가 예상한 답과 실제 결과가 맞는지 확인하는 부분입니다. expect()는 "이 답이..."라고 시작하는 문장이고, 뒤에 오는 matcher 함수들은 "...이것과 같아야 해"라고 끝나는 문장이라고 생각하면 됩니다!

expect()와 주요 matcher 함수들

// 기본적인 값 비교
expect(value).toBe(expected);          // "이 값이 정확히 이것과 같아야 해!"
expect(value).toEqual(expected);       // "이 값이 내용적으로 이것과 같아야 해!"
expect(value).toBeTruthy();           // "이 값이 참이어야 해!"
expect(value).toBeFalsy();            // "이 값이 거짓이어야 해!"

// 숫자 관련
expect(value).toBeGreaterThan(3);     // "이 값이 3보다 커야 해!"
expect(value).toBeLessThan(5);        // "이 값이 5보다 작아야 해!"
expect(value).toBeCloseTo(0.3);       // "이 값이 0.3과 비슷해야 해!"

// 객체/배열 관련
expect(object).toHaveProperty('key');  // "이 객체가 이런 속성을 가지고 있어야 해!"
expect(array).toContain(item);        // "이 배열이 이 항목을 포함해야 해!"
expect(object).toMatchObject({...});   // "이 객체가 이런 구조를 가져야 해!"

3. 설정 및 정리 함수들