🦑 testing-library/react로는 말줄임 테스트를 할 수 없다.

testing-library/React로는 말줄임(truncate) 체크를 할 수 없었던 이유 — Cypress를 쓰자

testing-library/react에서는 scrollWidth와 clientWidth는 언제나 0 😇

어렸을 때 동생이랑 종종 봤던 정글은 언제나 맑음 뒤 흐림이라는 만화 (출처: 나무위키)

근래에 리액트로 회사에서 공용으로 쓰는 컴포넌트를 만들면서 말줄임(…)이 잘 되는지 테스트코드를 쓰고 싶은데, 마음처럼 잘 안됐어요.

function isTextTruncated(element) {
  return element.scrollWidth > element.clientWidth;
}

위와 같이 scrollWidth가 clientWidth보다 길어졌다면 말줄임 처리가 될 것이기 때문에 이걸로 테스트하면 되겠다! 싶었어요. 그런데 scrollWidth와 clientWidth가 0을 return해서 값을 비교할 수가 없더라고요. 헐..🤭

코드는 잘못이 없지, 내가 잘못한 거지라는 생각으로 구글링을 하다가 testing-library/react-testing-library Github 이슈 페이지에서 저랑 비슷한 질문을 한 사람을 찾았습니다. 그리고 거기에 굉장하고 굉장한 분인 켄트씨가 친절하게 답변을 해주셨는데…

응 안돼 (음. 3번 Use Cypress에 눈길이 갔어요 왠지)

testing-library는 기본적을 JSDOM을 이용한다고 합니다. 그런데 이 JSDOM은 layout에 대한 지원을 하지 않기 때문에, scrollWidth, clientWidth같이 측정되는 값은 항상 0을 리턴한다고 하네요!

scrollHeight/clientHeight for an element is always zero · Issue #353 ·…

JSDOM Github페이지로 이동해서 사실인지 확인해봅시다.

JSDOM은 Layout을 지원하지 않아요.

Note that jsdom still does not do any layout or rendering, so this is really just about pretending to be visual, not about implementing the parts of the platform a real, visual web browser would implement.

(의역) jsdom은 여전히 레이아웃이나 렌더링 작업을 하지 않다는 점을 주의해야합니다. 시각적으로 (렌더링 등의 작업을)하는 척하고 있지만, 진짜 브라우저의 일부처럼 동작하지 않습니다.

Readme파일을 읽다보니 이런 말이 있습니다. 켄트씨의 말처럼 jsdom은 지원을 하지 않는다네요. does not do any layout or rendering 부분에 다른 문서 링크가 연결되어 있길래 타고 들어가보았습니다.

이 문서에서는 우리가 쓰는 크롬 브라우저 같은 웹 플랫폼에서는 기능이 있지만, jsdom에서는 구현되지 않은 것들에 대해 쓰여있었습니다.

jsdom/jsdom

웹플랫폼에는 기능이 있지만, JSDOM에는 없는 것들

🙇🏻‍♀️ 제 나름대로 번역하면서 저의 언어로 옮겨적은 것이다보니 정확하게 확인하고 싶은 꼼꼼쟁이 분들은 직접 문서를 읽는 것을 추천드립니다 👍

JSDOM 가 열심히 노력하고 있지만 최신 브라우저 API를 다 반영한 상태는 아닙니다. 웹플랫폼에는 있지만 JSDOM에 없는 가장 굵직한 2개의 기능은 Navigation과 Layout입니다.

• Navigation: 링크를 클릭하거나 location.href 에 값을 할당할 때 전역객체나 관련된 다른 객체들을 변경할 수 있는 기능이 없습니다.
• Layout: element들이 CSS의 결과로 시각적으로 배치되어 있는 위치를 계산할 수 있는 getBoundingClientRects() 또는 offsetTop 같은 속성은 JSDOM에서 지원하지 않습니다.

현재 상태의 JSDOM은 위 기능들과 관련되어서는 가상(쉽게 말해 가짜) 동작을 하고 있습니다. Naviagion 같은 경우에는 가상의 콘솔에 not implemented(구현되지 않음)또는 jsdomError같은 에러를 뱉고, Laytout 관련 속성일 경우에는 0을 return하고 있습니다. 그래서 scrollWidth, clientWidth는 항상 0을 return할 수 밖에 없습니다.

어떤 경우에는 코드로 이런 한계를 극복할 수도 있습니다. 크롤링 중에 이동하는 페이지마다 JSDOM instance를 새로 생성한다든지, Object.defineProperty() 를 이용해서 다양한 레이아웃과 관련한 getter와 메소드가 리턴하는 값을 변경할 수 있습니다.

예를 들면 이런 식으로요! viniciusavieira님이 제안한 내용을 가져왔습니다.

const originalOffsetHeight =
  Object.getOwnPropertyDescriptor(
    HTMLElement.prototype,
    'offsetHeight'
  );
Object.defineProperty(
  HTMLElement.prototype,
  'offsetHeight',
  originalOffsetHeight
)

또는 켄트씨 같은 경우에는 아래와 같은 방법을 예전에 사용한 적이 있다고 하네요. Cypress를 쓰거나 실제 브라우저를 이용할 게 아니라면 아래와 같은 방법을 추천한다고 합니다. 더 많은 예제는 여기에서 확인할 수 있습니다.

import matchMediaPolyfill from 'mq-polyfill'
// ...

beforeAll(() => {
  matchMediaPolyfill(window)
  window.resizeTo = function resizeTo(width, height) {
    Object.assign(this, {
      innerWidth: width,
      innerHeight: height,
      outerWidth: width,
      outerHeight: height,
    }).dispatchEvent(new this.Event('resize'))
  }
})
// ...then in my test
window.resizeTo(800, 300)

다른 방법으로는 JSDOM이 지원하지 않고 있는 기능을 PhantomJS는 지원하고 있기 때문에, PhantomJS를 이용해볼 수도 있습니다. PhantomJS와 JSDOM을 비교하는 글은 여기에서 확인하실 수 있습니다. 참고로 PhantomJS는 좀 오래되고 희귀한 렌더링 엔진을 사용하고 있긴하지만 완전한 브라우저이고, JSDOM은 순수한 JavaScript로 만들어져 Node.js 기반에서 돌아가는 완전한 브라우저가 아닌 라이트버전의 브라우저입니다.

결론적으로는 Layout에 대한 테스트는 Cypress로 해야한다

간단한 유닛테스트는 분명 testing-library/react가 유용한 것 같습니다. 그런데 Navigation(이 페이지에서 저 페이지로 이동한다든지..?)이나 Layout의 경우에는 아무래도 Cypress같이 E2E 테스트를 할 수 있는 라이브러리를 이용하는 것이 좋겠구나! 를 배웠습니다.

JSDOM문서에서는 PhantomJS가 언급되어 있지만.. 나중에 E2E 테스팅에 도전해보기 위해서는 한 번쯤 Cypress를 이용해보고 싶다는 생각을 했습니다.

그래서.. Cypress로 말줄임 테스트 코드를 짜서 해보는 것은..
다음 블로그 글에서 시도해보려고 합니다!
이번 블로깅은 여기서 끗! 🤓