단위 테스트

단위 테스트란

컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차
모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차

효과적인 단위 테스트 코드 작성법

F.I.R.S.T 원칙

Fast: 단위 테스트는 빨라야 한다.
Isolated: 단위 테스트는 실행할 때마다 같은 결과를 만들어야 한다.
Self-validation: 단위 테스트는 스스로 테스트를 통과했는지 아닌지 판단할 수 있어야 한다.
Timely: 단위 테스트는 프로덕션 코드가 테스트에 성공하기 전에 구현되어야 한다 (TDD)
Thorough: 단위 테스트는 성공적인 흐름뿐만 아니라 가능한 모든 에러나 비정상적인 흐름에 대응해 야 한다.

Given-When-Then

• Given: 테스트를 하기 위해 세팅하는 주어진 환경
• When: 테스트를 하기 위한 조건
• Then: 예상결과를 나타내며 의도대로 동작하는지 검증 및 확인

  it('should clear the value and onClear is triggered', async () => {
	// Given
    const mockFn = jest.fn();
    render(<Input label="my input" isClearabl onClear={mockFn} />);

    // When
    const clearBtn = screen.getByRole('button');
    fireEvent.click(clearBtn);

    // Then
    const input = screen.getByLabelText('my input');
    expect(input.value).toBe('');
    expect(mockFn).toHaveBeenCalledTimes(1);
  });

테스트 케이스의 목적을 명확히

테스트의 목적: 버튼을 눌렀을 때 좋아하는 과일이 바나나로 바뀐 문구가 노출되는지 검증

// 첫 번째 테스트 코드
it('바나나 문자열로 updateWord 호출 시 word가 바나나로 변경된다', () => {
  const { result } = renderHook(() => useStore());

  act(() => {
    result.current.updateWord('바나나');
  });

  expect(result.current.word).toBe('바나나');
});

내부적으로 가지는 단어라는 상태가 올바르게 변경되는지 테스트 (내부에서 사용하는 zustand 라이브러리 동작 검증)

// 두 번째 테스트 코드
it('버튼 클릭 시 좋아하는 과일이 바나나로 바뀐다', async () => {
  const user = userEvent.setup();
  render(<WordWithButton />);

  await user.click(screen.getByRole('button', { name: '좋아하는 과일 바꾸기' }));

  expect(screen.getByText(/바나나/i)).toBeInTheDocument();
});

화면 내에 ‘바나나’라는 단어가 있는지 테스트

// 세 번째 테스트 코드
it('버튼 클릭 시 heading 영역의 문구가 바나나를 좋아한다는 내용으로 변경된다', async () => {
  const user = userEvent.setup();
  render(<WordWithButton />);

  await user.click(screen.getByRole('button', { name: '좋아하는 과일 바꾸기' }));

  expect(screen.getByRole('heading', { name: '나는 바나나를 좋아한다!' })).toBeInTheDocument();
});

버튼을 눌렀을 때 heading 영역의 문구가 바나나를 좋아한다는 내용으로 변경됨을 테스트

참고

배민 기술블로그 (단위 테스트)
https://techblog.woowahan.com/17404/