유저가 발생시키는 이벤트에 따라 컴포넌트의 테스트 대상이 어떻게 동작하는지 테스트한다.
버튼을 눌러 색이 바뀐다든지, input 의 text를 입력하여 검색을 한다든지 등의 이벤트를 React Testing Library에서 가상으로 동작시킬 수 있다.
fireEvent
React Testing Library(이하 RTL) 에선 유저의 이벤트를 가상으로 동작시키는 fireEvent를 제공한다. 자세한 내용은 아래의 링크에서 확인할 수 있다.
fireEvent 사용하기
https://testing-library.com/docs/dom-testing-library/api-events/
예시
테스트는 다음과 같다.
- test button 을 클릭하면 useState를 활용하여 isClicked 의 값을 관리한다.(최초 값은 false)
- p 태그에선 isClicked state를 활용하여 'button is clicked ? isClicked 상태값' 을 보여준다.
- p 태그의 최초 값은 'button is clicked ? : false' 이다.
- 처음 클릭하면 'button is clicked ? : true' 가 된다.
- 다시 클릭하면 'button is clicked ? : false' 가 된다.
컴포넌트 코드
테스트 코드
- isClickedText 라는 이름으로 render 된 Example 컴포넌트에서 'button is clicked ?' 라는 text 를 가진 대상을 찾는다.
- toHaveTextContent 라는 matchers 를 활용하여 text에 false가 있는지 확인하다.
-fireEvent.click() 을 통해 testButton 을 클릭하는 유저 이벤트를 발생시킨다. - toHaveTextContent matcher 를 활용하여 textdp true가 있는지 확인한다.
userEvent
fierEvent 에서 click 이외에도 change 등의 유저 이벤트 메서드를 제공한다. 그러나 focus, keyDown, hover 등의 유저 이벤트를 테스트하기엔 부족하다.
이를 보완하기 위해 fireEvent 아닌 useEvent 를 사용한다.
firerEvent 대신 userEvent를 권장하는 이유이다.
userEvent 를 import하면 fireEvent와 동일한 패턴으로 사용하면 된다.
userEvent 사용하기
https://testing-library.com/docs/ecosystem-user-event/
예시, fireEvent 대신 userEvent사용하기
userEvent 예시 코드
- I agree terms and conditions 가 적혀있는 체크 박스를 클릭하지 않으면 submit 버튼을 클릭할 수 없다.(disabled)
- 해당 체크 박스를 클릭하면 submit 버튼을 클릭할 수 있다.
- input 에 텍스트를 작성하고, 해당 태그가 텍스트를 값(value)로 가지고 있는지 확인한다.
컴포넌트 코드
테스트 코드
- checkbox와 textbox 는 컴포넌트 코드에서 둘다 input 태그이다.
- 테스트 대상으로 이를 가져올 때 checkbox의 경우엔 getByLabelText를 사용했고 textbox는 getByPlaceholderText 를 사용하였다.
- checkbox의 클릭 상태에 따라 submitButton 의 동작 여부를 확인한다.
- userEvent.type 을 사용하여 가상으로 타이핑한다.
- textBox의 value 값을 확인한다.
생경하다.