시각적 요소가 포함된 기능은 어떻게 테스트할 수 있을까?

React Testing Library

• 문제1: RTL은 simulated된 jsdom을 사용해 Node.js 환경에서 렌더링하기 때문에 getBoundingClientRect는 제대로 된 값을 반환하지 않는다.

• 해결1: getComputedStyle을 사용할 수 있다.

• 문제2: getComputedStyle은 계산된 CSS를 반환하지 실제 렌더되는 값과는 차이가 있을 수 있고, jsdom으로 인해 PointerEvent 발생 시 제대로 된 값을 사용할 수 없었다.

• 해결2:

  • 현재 작성하고 있는 테스트가 시각적 요소를 포함하고 있기 때문에 RTL로 테스트하기 부적합하다는 결론
  • 시각적 요소를 정확히 검증하려면 브라우저에 실제 렌더링이 필요
  • E2E나 해당 컴포넌트를 검증할 수 있는 StoryBook의 Interection Tests 애드온을 사용.

StoryBook Interaction Test

• @storybook/addon-interactions 애드온
• 인터랙션 테스트는 Jest, RTL, Playwright으로 구현되어 있어, 실제 브라우저 상에서 특정 컴포넌트의 동작을 시뮬레이션 해볼 수 있다.
• 특정 컴포넌트에 대한 시각적 인터랙션 테스트를 진행하고 싶은 경우 사용
• 특히, 모바일 기기에서 테스트에 유용
• 버그가 발생했을 때, 상황을 재현해 코드만 수정하지 않고, 문제 케이스에 대한 테스트를 먼저 작성하고 테스트를 성공시키는 방식으로 버그를 해결. 이로 인해 새로운 케이스 뿐만 아니라 기존 동작도 정상적으로 동작한다는 것을 보장하면서 버그를 해결할 수 있어서 좋았다고 한다.

생각

현재 프로젝트에 테스트를 적용하면서 확실히 강의를 들을 때와는 다르다는 걸 느끼고 있었다. 특히, 쉬울 줄 알고 시작했던 캐러셀 요소 테스팅이 생각보다 까다롭다고 느꼈는데, 시각적 요소를 포함하고 있기 때문이다. 예를 들어, 캐러셀은 슬라이더가 움직이면서 이미 렌더링 되어 있는 카드 컴포넌트들 중 일부를 보여주는 형식으로 구현되어 있는데, DOM에는 이미 모든 카드가 렌더링되어 있기 때문에 실제로 화면에 원하는 요소만 보이는지는 테스트하기가 까다로웠다.

이 글을 읽으면서 유닛 테스트를 위해 Jest, Vitest와 RTL만 생각해볼 것이 아니라, 시각적 요소를 포함한 테스트는 E2E나 StoryBook의 도입을 고려해봐야겠다는 생각을 했다.