Jest

render

const { getByText, getByRole } = render(<Component />);

• @testing-library/react 의 메소드
• 컴포넌트를 가상 DOM에 렌더링
• 여러 쿼리 함수들을 반환한다.

getByText

const element = getByText("To do");

• 텍스트 내용으로 DOM 요소를 찾는 쿼리 메소드
• 일치하는 요소가 없으면 에러 발생
• 정확히 일치하는 텍스트를 찾음

getByRole

const button = getByRole("tab", { name: "To do" });

• Aria role로 DOM 요소를 찾는 쿼리 메소드
• 접근성 테스트에 유용
• name 옵션으로 추가 필터링 가능

fireEvent

fireEvent.click(element);     // 클릭 이벤트
fireEvent.mouseDown(element); // 마우스 다운
fireEvent.mouseUp(element);   // 마우스 업

• DOM 이벤트를 시뮬레이션하는 메소드
• 다양한 이벤트 타입 지원 (click, change, keyPress 등)

userEvent

// 1. userEvent vs fireEvent
// fireEvent: 단순히 DOM 이벤트만 발생
fireEvent.click(button);

// userEvent: 실제 사용자처럼 여러 이벤트를 순차적으로 발생
// 예: 클릭할 때 mouseOver -> mouseDown -> mouseUp -> click 순서로 발생
await userEvent.click(button);

// 1. 클릭 관련
await user.click(element);      // 클릭
await user.dblClick(element);   // 더블 클릭
await user.tripleClick(element);// 트리플 클릭

// 2. 키보드 관련
await user.type(input, 'Hello');           // 타이핑
await user.keyboard('{Enter}');            // 키보드 입력
await user.tab();                          // 탭 키

// 3. 마우스 관련
await user.hover(element);                 // 마우스 오버
await user.unhover(element);               // 마우스 아웃

// 4. 복사/붙여넣기
await user.copy(element);                  // 복사
await user.paste('텍스트');                // 붙여넣기

// 5. 드래그 앤 드롭
await user.drag(source);                   // 드래그
await user.drop(target);                   // 드롭

• 더 현실적인 사용자 동작 테스트 가능
• 이벤트 순서가 보장됨
• 접근성 테스트가 더 명확함
• 비동기 동작 처리가 더 쉬움

toBeInTheDocument

expect(element).toBeInTheDocument();

• Jest matcher
• 요소가 DOM에 존재하는지 확인
• @testing-library/jest-dom 에서 제공

toHaveBeenCalledWith

expect(mockFunction).toHaveBeenCalledWith("expected arg");

• Jest matcher
• mock 함수가 특정 인자와 함께 호출되었는지 확인
• mock 함수의 호출 검증에 사용

mockClear

mockFunction.mockClear();

• Jest mock 함수의 호출 기록을 초기화
• 각 테스트 전에 mock 상태를 리셋

toBeDefined

test('toBeDefined 예시', () => {
  const foo = {
    bar: 'hello',
    baz: undefined,
    func: () => {}
  };

  expect(foo.bar).toBeDefined();    // 통과 (값이 있음)
  expect(foo.func).toBeDefined();   // 통과 (함수가 있음)
  expect(foo.baz).toBeDefined();    // 실패 (undefined)
  expect(foo.xyz).toBeDefined();    // 실패 (존재하지 않는 속성)
});

• 값이 undefined인지 아닌지 검사