React Testing Tutorial(5) - getByRole, getByRole option

getByRole접근성 트리를 통해 요소를 찾아내는 데 사용하는 메서드이다.사용자가 페이지에서 상호작용 할 수 있는 요소를 찾아내는 데 도움을 준다.주요 개념1. 역할 기반 탐색getByRole은 HTML의 role 속성에 따라 요소를 찾아낸다. 이 role은 스크린 리더와 같은 접근성 도구가 웹 페이지를 해석할 때 사용하는 중요한 속성이다.2. 일치 기준기본적으로 역할 기반으로 찾지만 추가적으로 name옵션을 사용하여 요소의 텍스트나 aria-label과 같은 접근성 속성도 검사할 수 있다.3. 다양한 HTML 요소 탐색버튼, 링크, 이미지, 체크박스 등 다양한 HTML 요소를 탐색할 수 있다., , 등은 각각 button, link , checkbox와 같은 역할을 한다. 'getByRole'을 사..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 8. 25.
• textsms

React Testing Tutorial(4) - RTL Queries

RTL Queries는 React Testing Library (RTL)에서 제공하는 DOM 요소를 선택하고 검증하기 위한 함수들을 의미한다.RTL은 React 컴포넌트의 UI와 상호작용을 테스트하기 위해서 사용되는 라이브러리로 이 라이브러리의 핵심 기능 중 하나가 queries이다.RTL에서 제공하는 주요 queries1. getBy조건에 맞는 단일 요소를 반환, 찾지 못하면 테스트가 실패한다.// 'submit' 텍스트를 포함하는 요소를 반환getByText('submit')2. queryBy조건에 맞는 단일 요소를 반환, 찾지 못하면 'null'을 반환요소가 1개 이상 있을 경우 에러를 발생한다.// 'submit' 텍스트를 포함하는 요소를 반환하거나 null을 반환queryByText('submi..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 8. 15.
• textsms

React Testing Tutorial(3) - Assertion, Matchers

Assertions테스트에서 코드의 특정 조건이나 표현이 예상대로 작동하는지를 확인하는 구문을 의미한다.테스트 중인 코드가 기대한 결과를 반환하는지, 특정 상태에 있는지를 확인하기 위해서 사용된다.즉, Assertion은 코드의 동작이 기대와 일치하는지 확인해 주고, 예상과 일치하지 않을 경우 테스트를 실패로 표시한다.테스트를 통과/실패로 만들어 예상과 실제 결과 간의 불일치를 조기에 발견할 수 있게 도와준다.사용 예시expect(value).toBe(expectedValue)위의 구문이 Assertion으로 value가 expectedValue와 동일한지 검사한다.  Matchers테스트 대상 코드의 결과를 예상한 값과 비교하는 데 사용되는 함수이다. expect와 함께 사용되고, 올바로 작동하는지 확..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 8. 10.
• textsms

React Testing Tutorial (2) - Code Coverage

1. Code Coverage테스트가 얼마나 코드베이스를 덮고 있는지 측정한다.코드 적용 범위는 테스트된 소프트 웨어 코드의 양을 이해하는데 도움이 되는 측정 기준이다.테스트의 품질을 평가하는 데 도움이 되는 매우 유용한 측정 기준이다.Coverage의 종류Statement coverage (명령문 커버리지)명령문 커버리지는 코드의 각 명령문이 최소한 한 번은 실행되었는지를 확인한다.코드의 모든 명령문이 실행되었는지 확인하여, 테스트가 충분히 이루어졌는지 확인한다.아래의 예시에서는 2번 실행되었는지 여부를 체크할 수 있다.function add(a,b) { let sum = a + b // 명령문 1 return sum; // 명령문 2} Branches coverage (브랜치 커버리지)코..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 8. 2.
• textsms

React Testing Tutorial (1) - Filtering, Grouping

Filtering TestsJest의 Watch 모드에서 특정 테스트만 실행하고 싶을 때, t,p를 누르면 된다.p를 누르면 테스트 파일명을 입력할 수 있는 프롬프트가 나타난다. 테스트 파일명에 대한 정규식을 입력하면 해당 정규식을 만족하는 테스트 파일만 실행된다.또 다른 방법으로는 t를 누르면 테스트명을 입력할 수 있는 프롬프트가 나타난다. t는 테스트명에 대한 정규식을 입력할 수 있게 해 준다. 이 경우 해당 정규식을 만족하는 테스트만 실행된다.  코드를 이용한 방법 - test.only, test.skiptest.only를 사용하면 해당 테스트만 실행된다. test.skip을 사용하면 해당 테스트는 실행되지 않는다.test.only("this will be the only test that runs..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 7. 23.
• textsms

웹 페이지 렌더링 방식 이해: CSR, SSR, SSG, ISG

웹 페이지를 표시하는 방법페이지를 렌더링 하는 방법에는 CSR, SSR, SSG, ISG 가 있다.React를 처음 배울 때 CSR, SSR의 기본적인 차이점에 대해서 공부했었고, 이때의 개념으로 CSR, SSR을 사용해 왔다. 하지만 Next를 공부하면서 SSG, ISG에 대한 개념을 접하게 되었고 이 부분에 대해서 미흡하여 글을 작성했다.1. CSR : 클라이언트 사이드 렌더링특징모든 렌더링 작업이 사용자 브라우저에서 진행된다.페이지 로딩 후 필요한 데이터만 서버로부터 비동기적으로 불러와서 처리한다.장점사용자 인터랙션이 매우 빠르고, 애플리케이션의 동적인 부분을 효과적으로 처리할 수 있다.단점초기 로딩 시 모든 스크립트를 불러와야 해서 시간이 오래 걸릴 수 있다검색 엔진 최적화(SEO)에 불리하다.보..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 7. 10.
• textsms