4.Testing Library

Jest

• 페이스북에서 만든 테스팅 도구이다.

• 테스팅 프레임워크의 최초 사용자들에게 많은 설정을 요구하지는 않는다.(zero config)

Describe-Context-It 패턴

키워드	설명
Describe	테스트 중인 기능 또는 기능의 전반적인 동작을 설명하는 데 사용된다. 일반적으로 기능에 대한 간략한 설명이 포함되며 테스트에 필요한 전제 조건이나 가정도 포함될 수 있다.
Context	기능이 테스트되는 특정 컨텍스트 또는 시나리오를 설명하는 데 사용된다. 여기에는 일반적으로 기능을 테스트하기 위해 설정해야 하는 특정 입력, 매개 변수 또는 상태가 포함된다.
It	수행 중인 특정 테스트 사례 또는 주장을 설명하는 데 사용된다. 일반적으로 테스트 중인 기능이나 기능의 예상 출력이나 동작이 포함된다.

장점

• 테스트 코드를 계층 구조로 만들어 준다.

• "빠뜨린" 테스트 코드를 찾기 쉽다.

describe('add 함수는', () => {
  it('두 숫자의 합을 리턴해준다.', () => {
    expect(add(1, 2)).toBe(3);
  });
});

Describe-Context-It 패턴을 사용하면 테스트 모음을 더 쉽게 읽고 이해할 수 있을 뿐만 아니라 특정 문제를 더 쉽게 격리하고 디버그할 수 있다. 또한 테스트 모음이 포괄적이고 모든 관련 시나리오 및 동작을 포함하는지 확인하는 데 도움이 될 수 있다.

React Testing Library

React Testing Library는 사용자가 상호 작용하는 방식을 시뮬레이션하는 방식으로 React 구성 요소를 테스트하는 간단하고 직관적인 방법을 제공하는 테스트 유틸리티이다. 이는 사용자가 웹 애플리케이션과 상호 작용하는 방식과 유사한 방식으로 DOM을 쿼리하고 조작하기 위한 유틸리티 세트를 제공하는 DOM 테스팅 라이브러리 위에 구축된다.

React Testing Library는 개발자가 구현 세부 사항이 아닌 구성 요소의 동작에 초점을 맞춘 테스트를 작성하도록 권장하는 것을 목표로 한다. 즉, 특정 요소나 스타일의 존재와 같은 특정 구현 세부 정보를 테스트하는 대신 구성 요소가 사용자 상호 작용 및 해당 상태 변경에 대한 응답으로 올바르게 작동하는지 확인하기 위해 테스트를 작성해야 한다.

React Testing Library는 DOM을 쿼리하고 render, fireEvent 및 waitFor와 같은 구성 요소와 상호 작용하기 위한 일련의 유틸리티를 제공한다. 이러한 유틸리티를 통해 개발자는 단추 클릭 또는 양식에 텍스트 입력과 같은 구성 요소와의 사용자 상호 작용을 시뮬레이션하고 이러한 상호 작용에 대한 응답으로 구성 요소가 올바르게 작동하는지 확인할 수 있다.

React Testing Library를 사용하면 개발자가 React 구성 요소에 대해 보다 안정적이고 유지 관리 가능한 테스트를 작성하는 동시에 보다 사용자 중심적인 테스트 접근 방식을 촉진할 수 있다. 구현 세부 사항이 아닌 구성 요소의 동작에 초점을 맞춤으로써 개발자는 구성 요소의 내부 구조 변경에 더 탄력적이고 최종 사용자의 요구와 기대에 더 잘 부합하는 테스트를 작성할 수 있다.

The more your tests resemble the way your software is used, the more confidence they can give you. - RTL 공식문서 테스트가 소프트웨어 사용 방식과 유사할수록 더 많은 신뢰를 얻을 수 있다.

React Testing Library는 UI에 특화된 라이브러리이다.

RTL은 이름 그대로 React 컴포넌트를 테스트 하기 위해 만들어진 도구이기 때문에, 기본적으로 CRA에 내장되어 있다. 만약 CRA를 사용하지 않고 개발 환경을 직접 설정한다면 npm install --save-dev @testing-library/react 명령어를 이용해 설치하면 된다.

test('Greeting', () => {
 render(<Greeting name='world' />);

 const text = screen.getByText(/Hello, world/);
 expect(text).toBeInTheDocument();
});

쿼리 타입

• get - 동기적으로 처리되며 타겟을 찾지 못할 시 에러를 던집니다.

• find - 비동기적으로 처리되며 타겟을 찾지 못할 시 에러를 던집니다.

• query - 동기적으로 처리되며 타겟을 찾지 못할 시 null을 반환한다.

Action, Assertion, 비동기 테스트 등등 이 부분도 앞으로 강의가 진행되면서 무분별한 테스트를 작성하기 보다 정말 필요한 부분에 테스트가 들어가도록 고민하면서 진행해 봐야 할 것 같다.

• 참고 초심자를 위한 React Testing Library

Aha Moment

Chat GPT를 이용해서 1주차 빈약했던 부분을 추가로 정리해 주었는데 React Testing Library를 정리하고 나니깐 Test 강의가 더 기대되기 시작했다. 사실 현재 운영하고 있는 서비스에는 test 코드가 작성되어 있지 않아서 코드 안정성이 좋다고 할 수 없고 이전에 소셜로그인 관련해서 추가적인 수정 작업을 통해서 소셜로 이미 가입되어있는 사용자의 로그인은 정상적으로 진행이 되었지만 회원가입이 진행이 정상적으로 동작하지 않았던 상황이 있었기 때문에 이런 부분에 대해서 방지 하기 위해서는 테스트 코드가 필요하다고 생각은 들었지만 적용까지는 쉽지 않은 상황이어서 이후에 있을 테스트 강의를 통해서 어느정도 익숙해지면 작은 부분부터 적용해 보도록 해야겠다.