프론트엔드의 Testing - (1) 이론

Testing

코드의 에러를 확인하고 발생할 수 있는 이슈와 버그를 예측하는 과정

테스트의 종류

테스트는 기본적으로 어떤 것을 검증하고 확인하는 용도로 만드는 것이므로, 어떤 것을 확인할지에 따라 적용하는 테스트 종류가 다르다.

테스트는 단위에 따라 3가지로 나눌 수 있다.

1. 단위 테스트
   • 특정한 모듈 or 단위가 기능을 의도한 대로 올바르게 수행하고 있는지 확인하는 것
   • 가장 기본적이고 기저에 깔려 있어야 하는 테스트다.
   • 명세가 변경된다면 가장 영향을 많이 받는 테스트이므로 설계에 신중해야 한다.

2. 통합 테스트

3. E2E 테스트

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

테스트 코드는 코드가 올바르게 작성되었는지 검증하는 또 다른 코드다.

테스트 코드 역시 한 번 만들고 끝이 아니라 프로덕트를 구성하는 코드처럼 계속 유지 보수되고 발전시켜야 한다.

F.I.R.S.T 원칙

• Fast: 빨라야 한다
• Isolated: 독립적으로 실행되어야 한다
• Repeatable: 실행할때마다 같은 결과를 만들어야 한다
• Self-validating: 스스로 판단할 수 있어야 한다
• Timely/Thorough

DAMP하게 작성하기

DAMP (Descriptive and Meaningful Phrases)
= 서술적이고 의미있게 작성하기

테스트 코드는 중복이 발생하더라도 직관적이고 명확하게 이해되도록 작성하는 것이 중요하다.

Given-When-Then 패턴

이 패턴은 BDD 중심인 사용자 행위를 기반으로 한 테스트 시나리오를 정의할 수 있도록 도와준다.

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

it('버튼을 1회 클릭하면 1번 클릭했다는 문구가 노출된다', async () => {
    // Given: 사용자와 화면이 준비되어 있고, 화면에는 버튼이 존재함
  const user = userEvent.setup();
  render(<Component />);

    // When: 사용자가 '여기를 눌러보세요'라는 버튼을 클릭함
  const buttonElement = screen.getByRole('button', { name: '여기를 눌러보세요' });
  await user.click(buttonElement);

  // Then: 문구가 나타나는지 검증함
  expect(screen.getByText('버튼을 1번 클릭했습니다.')).toBeInTheDocument();
});

(참고)

테스트 코드 작성 가이드(근데 이제 Jest를 곁들인)
[Jest] 테스트 코드로 JS 의 기능 및 로직 점검하기
코드와 함께 살펴보는 프론트엔드 단위 테스트 – Part 1. 이론 편