Jest Debugging Tips

👉 console.log() 명령문이 브라우저의 출력을 오염시키는 것처럼 디버그 명령문도 테스트를 오염시킵니다. 실제로 테스트를 디버그하고 싶을 때 명령문을 사용해야 하지만 코드베이스로 푸시해서는 안 됩니다.

screen.debug(element)

해당 테스트에서 작성한 element가 화면, DOM에서 어떻게 보일지 테스트 출력

• 사용 화면

screen.debug(screen.getByText("Grand total: $", { exact: false }));

• 출력 화면

console.log
  <h2>
    Grand total:
    $0.00
  </h2>

at logDOM (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/pretty-dom.js:87:13)

logRoles(HTMLElement)

DOM에 어떤 역할이 있는지 확인할 수 있어 역할로 검색 시 유용하게 사용

• 사용 화면

const { container } = render(<App />);
logRoles(container);
//App 내부의 Vanilla Button 검색 시 spinbutton 역할을 확인 후 검색에 사용
const vanillaButton = await screen.findByRole("spinbutton", {name: "Vanilla",});

• 출력 화면

console.log
  spinbutton:

  Name "Vanilla":
  <input
    class="form-control"
    id="Vanilla-count"
    type="number"
    value="0"
  />

  --------------------------------------------------

at logRoles (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/role-helpers.js:212:20)