JEST React에서 쓰기 계속됨
queryByText를 쓸 때 주의점 : 조금이라도 틀리면 내용물이 아닌 null 이 나온다
이 부분을 확인된 이유가 분명 같이 썼다고 생각했는데 계속해서 null이 나와서 에러가 떠서 강사님에게 물어보고 실제로 고쳐본 결과이기 때문이다
it('',()=>{
render(실행할 컴포넌트)
const initalState=screen.queryByText(예상되는 html 엘리먼트)
expect(initalState).toBeTruthy()
}
queryByText로 예상되는 html 엘리먼트와 같으면 값이 있고, 다르면 null이 되어 toBeTruthy에서 값이 있으면 PASS, null이면 FAIL이 나와서 구별을 할 수 있다
다른 방법으로는 getByText가 있다. 이 경우 마지막 줄에서 toBeTruthy()가 아닌 toBeInTheDocument() 를 써야 한다
참고 : queryBy와 getBy의 차이
getBy : 일치하지 않는 경우 오류를 반환한다
queryBy : 일치하지 않는 경우 null 을 반환한다
참고사이트 : https://leehyungi0622.github.io/2021/05/05/202105/210505-React-unit-test-questions/
screen.getByTestId : data-testid에 해당하는 같은 부분만 들고온다.
테스트를 하고자 할 때 위와 같이 하는데 함수를 실행해야 할 경우는 조금 다르다
it('',()=>{
render(실행하할 컴포넌트)
const 이름=screen.getByTestId(실행할 엘리멘트);
fireEvent.이벤트이름(const로 받아온 이름);
const 예상이름=screen.getByText(예상될 함수결과출력)
expect(예상이름).toBeInTheDocument();
}
순서대로 보면
- render로 실행할 컴포넌트를 들고온다
- 그 안에서 data-testid로 정해준 id값에 해당하는 태그를 들고온다
- fireEvent로 들고온 태그를 실행한다
- 실행한 뒤 예상될 출력값을 저장해둔다
- 그 값이 실제 실행한 뒤 값과 비교한다