가정문 올바르게 쓰기
const button = screen.getByRole('button')
expect(button.disabled).toBe(true) // ❌
expect(button).toBeDisabled() // ✅
JavaScript
복사
불필요한 act 사용 
act(() => fireEvent.click(button)) // ❌
fireEvent.click(button) // ✅
JavaScript
복사
개발자들이 act warning 메시지를 볼 때마다 이런 식으로 act로 감싸려고 하는데 render나 fireEvent는 이미 act로 래핑된 함수라 무의미한 행동이다. 워닝 메시지가 발생한다면 테스트가 종료된 후 상태 변경이 일어난 것 이므로 이에 대한 코드 수정이 필요하다.
쿼리를 올바르게 쓰기
ByRole를 더 활용하기
/* <button>
<span>hello</span>
<span>world</span>
</button> */
screen.getByText(/hello world/i) // ❌
screen.getByRole('button', {name: /hello world/i}) // ✅
JavaScript
복사
위와 같은 형태의 버튼도 쿼리가 가능하다는 장점이 있다.
접근성 role를 불필요하게 등록하지 않기
<button role="button">Click me</button> // ❌
<button>Click me</button> // ✅
JavaScript
복사
button은 button이라는 role을 가진 요소이므로 등록이 불필요하다. 이와 같이 테스트를 한답시고 함부로 role을 명명하고 등록하면 안된다. 우선 접근성에 대한 충분한 학습이 필요하다.
waitFor 내에서 사이드 이펙트 수행하지 말기
await waitFor(() => {
fireEvent.click(button) // ❌
expect(screen.getAllByRole('listitem')).toHaveLength(3)
})
fireEvent.click(button) // ✅
await waitFor(() => {
expect(screen.getAllByRole('listitem')).toHaveLength(3)
})
JavaScript
복사
waitFor는 수행한 작업으로 인해 가정문이 통과되는 사이에 시간이 걸리는 항목을 위한 것인데, 콜백은 몇번이고 실행될 수 있기 때문에 내부에 side-effect를 작성하면 안된다.
