테스트 라이브러리 테스트 디버깅

디버깅 테스트는 예상하지 못한 일에 실패하는 경우가 많기 때문에 순식간에 악몽이 될 수 있습니다.

다행스럽게도 테스트 라이브러리에는 우리가 활용할 수 있는 몇 가지 훌륭한 디버깅 옵션이 있습니다.

이 기사에서는 주로 DOM 렌더링 디버깅에 중점을 둘 것입니다.

표준 디버깅

대부분의 표준 사례에서 테스트 라이브러리는 실패한 요소를 출력합니다. 해당 출력에서 ​​무엇이 잘못되었는지 확인할 수 있어야 합니다.

그러나 이것은 중요한 DOM 요소를 테스트할 때 완전히 표시되지 않거나 보아야 할 실제 요소를 보지 못할 수 있습니다.

다음 앱 코드를 살펴보겠습니다.

function App({ firstTime = false }) {
  return (
    <div className='App'>
      <strong>Welcome to our app</strong>
      {firstTime && <p>I see this is your first time!</p>}
    </div>
  );
}

이제 실패한 테스트를 작성하여 어떤 일이 발생하는지 확인하겠습니다.

it('should render welcome text', async () => {
  render(<App />);
  expect(screen.getByText('Welcome to our appwrong')).toBeInTheDocument();
});

위의 이미지에서 볼 수 있듯이 간단한 오류가 발생하여 쉽게 찾을 수 있습니다.

이 파일이 훨씬 더 크다고 가정해 보겠습니다. 우리가 있어야 할 파티에서 끊어질 수도 있고,

여기서 한 가지 옵션은 표시되는 디버그 라인의 양에 대해 환경 변수를 확대하는 것입니다. (기본값 7000)

다음과 같이 볼 수 있습니다.

DEBUG_PRINT_LIMIT=10000 npm test

DOM 예쁘게 만들기

또 다른 뛰어난 디버깅 옵션은 prettyDOM 로, 렌더링의 더 예쁜 렌더링 버전을 console.log하는 데 사용할 수 있습니다.

import { prettyDOM, render } from '@testing-library/react';

it('should render prettyDOM', async () => {
  const { div } = render(<App />);
  console.log(prettyDOM(div));
});

보시다시피 디버그에 도움이 될 수 있는 실제 테스트를 잠시 제거했습니다.

이제 다음 출력이 표시됩니다.

logRole 사용

최근에 알게 된 정말 멋진 기능입니다.
렌더링된 DOM 내의 모든 ARIA 역할 목록을 출력할 수 있습니다.

또한 사용할 수 있는 요소byRole를 찾는 데 사용할 수도 있습니다.

앱을 다음과 같이 변경하여 시작하겠습니다.

function App({ firstTime = false }) {
  return (
    <nav className='App'>
      <ul>
        <li>
          <button>Button 1</button>
        </li>
        <li>Random text</li>
      </ul>
    </nav>
  );
}

이제 logRoles를 사용하여 액세스 가능한 모든 요소를 ​​찾을 수 있습니다.

import { logRoles, render } from '@testing-library/react';

it('should show logRoles', async () => {
  const { container } = render(<App />);
  logRoles(container);
});

다음과 같은 목록을 반환합니다.

탐색: <nav> 요소

목록: <ul> 요소

listitem: <li> 요소 2번

버튼: <button> 요소

이 구성 요소 내에서 사용 가능한 역할을 빠르게 볼 수 있으므로 이 접근 방식이 매력적이라고 ​​생각합니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나