리액트 테스팅 라이브러리 - toBeInTheDocument() 에러

expect(html 엘리먼트).toBeInTheDocument() 사용하려는데 toBeInTheDocument()에 에러가 발생했고 그 에러 메시지는 다음과 같다.

Property toBeInTheDocument does not exist on type JestMatchers<HTMLElement>

에러 발생 원인

이러한 에러가 발생하는 이유는 처음 리액트+타입스크립트 프로젝트를 만들었을 때 타입스크립트에 @tesing-library/jest-dom의 타입 정의(Type Definition)를 안 해주었기 때문이다. 타입스크립트에 Type definition을 주면 된다. 해결방법은 간단하다.

해결책

1. npm install --save-dev @tesing-library/jest-dom 을 실행하여 @tesing-library/jest-dom을 설치한다.
2. tsconfig.json의 compilerOptions에 다음을 추가한다.

{
  "compilerOptions": {
    // ...
    "types": ["@testing-library/jest-dom"],
    // ...
  }
}

[출처]
https://github.com/testing-library/jest-dom/issues/546