[ERROR] 'Assertion<HTMLElement>' 형식에 'toBeInTheDocument' 속성이 없습니다.

[DearYuto]

이슈

toBeInTheDocument 를 찾을 수 없는 문제

참고한 이슈

해결 방법

tsconfig.json 파일에 compilerOptions로 아래 값을 넣어주어 해결.

    "types": ["@testing-library/jest-dom"],

그래도 사용 시 에러 발생

Error: Invalid Chai property: toBeInTheDocument

해결 방법

import 구문 추가해주니 정상 동작함.

import '@testing-library/jest-dom/vitest';

문제는 계속 import 해줘야할 것 같아서 고민하던 중, setupFiles 를 추가하는 방향으로 해결할 수 있었다.

// vitestSetup.ts
import '@testing-library/jest-dom/vitest';

루트 폴더에 위 파일을 만들고 vitest.conifg.ts 파일에 추가해주었다.

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./vitestSetup.ts'], //이거 추가
  },
});