[오류해결] Property 'toHaveClass' does not exist on type 'JestMatchers<HTMLElement>'

오류 발생

VSCode로 React + Typescript환경에서 테스트코드를 작성하는 과정에서 toHaveClass가 없다는 오류가 발생했다.

오류 상세

import Button from "./Button";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("when the Button is clicked, then background color changes red to blue", async () => {
  const user = userEvent.setup();
  render(<Button />);
  const button = screen.getByRole("button", { name: "red to blue" });
  await user.click(button);
  expect(button).toHaveClass("red"); // Property 'toHaveClass' does not exist on type 'JestMatchers<HTMLElement>' 
});

원인 분석

Typescript의 컴파일 과정에서 발생하는 오류로 보인다.

해결 방법

문제를 해결하는 방법으로 2가지가 있는데 tsconfig.json의 compilerOptions에 추가하는 방법과 tsconfig.json의 include에 설정 파일을 추가하는 방법이 있다.
둘 중 본인의 상황과 취향에 맞는 것을 선택하면 된다.
나는 확장성이 좋아 보이는 2번째 방법을 선택했다.

첫번째 방법, tsconfig.json의 compilerOptions에 추가하기

첫번째 방법은 tsconfig.json 파일의 compilerOptions 설정에서 아래와 같이 types에 @testing-library/jest-dom을 추가하는 것이다.
추가한 다음 확인하면 오류가 발생하는 부분이 사라진 것을 확인할 수 있다.

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

두번째 방법, tsconfig.json에 설정 파일 include하기

두번째 방법은 설정 파일을 include 하는 방법이다.
추후 설정이 늘어나는 경우 파일의 내용만 신경쓰면 되므로 관리가 편리하다.
설정 파일의 이름은 자유롭게 만들 수 있지만 주로 setup.ts 또는 setupTests.ts로 관리하는 것으로 보인다.
작업 순서는 setupTests.ts 설정 파일 생성, jest.config.ts 변경, tsconfig.json 변경 순서로 진행한다.

1. setupTests.ts 파일 생성

프로젝트 root 경로에 setupTests.ts 파일을 생성하고 아래의 내용을 입력한다.
파일 경로는 상관이 없지만 config 파일은 일반적으로 프로젝트 root경로에 모아두는 편이라 관례를 따랐다.

// setupTests.ts
import "@testing-library/jest-dom";

2. jest.config.ts의 setupFilesAfterEnv 추가

아래와 같이 jest.config.ts 파일에서 setupFilesAfterEnv 옵션을 추가한다.

// jest.config.ts
/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

import type { Config } from "jest";

const config: Config = {
  ... 다른 옵션 생략 ...
  setupFilesAfterEnv: ["./setupTests.ts"],
};

export default config;

3. tsconfig.json의 include에 설정 파일 경로 추가

tsconfig.json 파일의 include에 설정 파일의 경로("setupTests.ts")를 추가한다.

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "setupTests.ts"],
  ... 다른 옵션 생략 ...
}

참고 자료

• compilerOptions 로 해결하기
• setupTests.ts 로 해결하기