React Testing Tutorial(9) - findBy

findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 18.
• textsms

React Testing Tutorial (8) - getAllBy..., textMatch

getAllBy-이전까지 getBy-를 이용해서 한 개의 요소를 찾는 방법을 배웠다. 여러 개의 요소가 있는 상황을 테스트하는 상황도 있을 것이다. 이때 사용할 수 있는 방법으로 getAllBy-가 있다. getAllBy-는 getBy-와 비슷하지만, 여러 개의 요소를 찾을 때 사용한다.이전 글들은 1개의 요소를 찾을 때 사용했지만, 이번 글에서는 여러 개의 요소를 찾을 때 사용하는 방법을 알아보자.사용법const elements = screen.getAllByRole("textbox")expect(elements).toHaveLength(2) // textBox가 2개 있을 때주의사항getAllBy-는 요소가 없을 때 에러를 발생시킨다.getAllBy-는 요소가 1개일 때도 에러를 발생시킨다.getAl..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 11.
• textsms

React Testing Tutorial(7) - getByDisplayValue, getByAltText, getByTitle, getByTestId

getByDisplayValue()폼 요소(, 등)에 표시된 텍스트 값을 기반으로 DOM요소를 찾는 데 사용된다.주로 폼 입력 필드의 값을 확인하거나 해당 값을 가진 요소를 대상으로 테스트할 때 유용하다.사용 예시import { render, screen } from '@testing-library/react';test('input 요소에 입력된 값을 찾습니다.', () => { render(); const inputElement = screen.getByDisplayValue('테스트 값'); expect(inputElement).toBeInTheDocument();});위 코드에서 getByDisplayValue('테스트 값')은 value 속성이 '테스트 값'인 input 요소를 찾는다.get..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 8.
• textsms

React Testing Tutorial(6) - getByLabelText(), getByPlaceholderText(), getByText()

1. getByLabelText()getByLabelText 함수는 폼 요소를 테스트할 때 주로 사용되다. 요소에 연결되어 있는 폼 요소(ex: input, textarea 등)를 쉽게 찾을 수 있게 도와준다.label에 연결된 폼 요소는 보통 접근성을 위해서 사용되며, getByLabelText를 사용하면 사용자가 실제로 인터페이스와 상호작용하는 방식과 유사한 방식으로 테스트할 수 있다.사용 예시아래와 같은 폼 요소가 있을 때UsernamePassword테스트 코드를 작성 시 getByLabelText()를 이용해서 input요소를 선택할 수 있다.text('폼 요소 테스트', () =>{ render() const usernameInput = screen.getByLabelText("Use..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 1.
• textsms

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

Jest를 이용한 TDD(Test-Driven Development)

목차 1. TDD 2. Jest 3. Jest 사용하기 4. Jest Syntax 5. Mock Function 1. TDD (Test-Driven Development) TDD는 Test-Driven Development로 소프트웨어 개발방법론 중 하나로 실제 코드를 작성하기 전에 테스트를 먼저 작성하는 방법이다. 테스트 코드를 통한 실패하는 코드(에러코드)를 작성하고 하나씩 고쳐나가면서 개발하는 과정을 거친다. 테스트는 메서드 또는 class처럼 작은 단위로 진행한다. 테스트에 통과되는 코드만 실제 코드로 작성한다. TDD를 이용하여 개발을 진행하게 되면 오류나 문제점을 미리 예방할 수 있어 프로젝트의 안정성과 신뢰성을 높일 수 있다. 작은 단위로 진행하면서 작성하기 때문에 코드의 유지보수가 용이해진..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 24.
• textsms