-
Notifications
You must be signed in to change notification settings - Fork 0
RTL 테스트 에서 비동기 함수 render 호출 에러
HuiSeung LEE edited this page Mar 11, 2022
·
2 revisions
- 컴포넌트 테스트 수행 중 render()로 비동기 함수 호출 했을 때 발생
- RTL 테스트 코드 컴포넌트 렌더링 시, 비동기 함수가 포함되어 있을 때, 렌더링을 비동기 처리하지 않아 발생하는 오류
testing library 에서 기본적으로 제공하는 메서드를 사용할 수 있다. 여기에는 findBy 쿼리를 사용할 수도 있다.
const button = screen.getByRole('button', {name: 'Click Me'})
fireEvent.click(button)
await screen.findByText('Clicked once')
fireEvent.click(button)
await screen.findByText('Clicked twice')
특정 시간을 기다려야 하는경우 waitFor
함수를 사용할 수있지만 해당 컴포넌트에 사용하기에는 무리가 있다고 판단된다.
js에서 제공하는 async를 사용해서 비동기 처리를 할 수있다.
- 비동기를 처리하기위해 많이 사용하는 async를 선택하였다. testing library 메서드를 사용할 수 있지만, 이를 이해하기 위한 시간보다 기존에 사용하는 async, await를 사용하는게 합당하다고 판단했다.
- Async Await으로 테스트 코드 콜백함수를 감싸 모든 비동기 코드가 처리된 후 렌더링 되도록 코드를 수정하여 해결
😎@Daewon Seo 🥳@papa 🧐@Coa 🤪@HuiSeung LEE
Test 관련 이슈
Next.js 관련 이슈
Git 관련 이슈
기타 이슈
기술공유
- [strapi] authenticated request 구현하기
- aria label는 왜 쓰는 것인가?
- font icon을 집어 넣을 때 i 태그로 넣을까? pseudo elements(before, after)로 넣을까?
- Nextjs에서 a 태그를 Link 태그로 감싸야 한다.
- Nextjs에서 img 대신 Image 컴포넌트 사용하기, next.config.js는 무엇인가?
- React.FC
- React.js rest Props와 Object destructuring
- Reactjs 컴포넌트 선언 방식을 화살표 함수로 할지 함수 선언문으로 할지
- Test 참고
- useAxios test code
- 뷰포트 메타태그, Next.js에서 Head 태그란?
- 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
- 타입스크립트 클래스에서의 protected, private 필드와 # 필드의 차이
- Global state VS local state 리덕스의 배경이해, 글로벌 변수와 다를 바 없다면 지양되어야 하지 않나?
- Fontawesome Icon React 적용방법
- classnames/bind 함수와 classnames 함수의 차이
- Jest와 Testing Library