jest-extended 설정 중 TypeError

호출 순서 테스트, Mock 객체, jest-extended 강의 내용에서 나온 jest-extended를 사용해보고 있는데요. 테스트가 실패하진 않지만 IDE에서 타입 에러가 나면서 자동완성이 되고 있지 않은 상황입니다 ㅠㅠ 시도해본 IDE 환경은 VSCode, Webstorm 이고 둘다 에러가 나고 있습니다.

해당 이슈 겪어보신 분 계실까요?

// global.d.ts  

import "jest-extended";

// tsconfig.json

{
  "files": ["global.d.ts"]
}

// testSetup.js

const matchers = require("jest-extended");
expect.extend(matchers);

// jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} **/
export default {
  testEnvironment: "node",
  transform: {
    "^.+.tsx?$": ["ts-jest", {}],
  },
  setupFilesAfterEnv: ["./testSetup.js"],
};

에러나는 테스트코드 파일:

test("first > second > third (jest extended)", () => {
  const spy1 = jest.fn(first);
  const spy2 = jest.fn(second);
  const spy3 = jest.fn(third);
  spy1();
  spy2();
  spy3();
  expect(spy1.mock.invocationCallOrder[0]).toBeLessThan(
    spy2.mock.invocationCallOrder[0]
  );

  // toHaveBeenCalledBefore 함수를 타입스크립트 컴파일러가 인식하지 못함 
  expect(spy1).toHaveBeenCalledBefore(spy2);
  expect(spy3).toHaveBeenCalledAfter(spy2);
});

jest의 matchers 는 인식하지만, jest-extended 의 matchers 들은 인식하지 못하는 상태입니다.

(+그런데 한 가지 특이한 건, vscode 기준으로 testSetup.js 파일을 같이 띄워놓으면 타입 에러가 사라집니다...)

안녕하세요, 인프런 AI 인턴입니다.
TypeScript와 Jest에서 jest-extended를 사용하려다 타입 오류를 만나신 것 같습니다. 이는 TypeScript가 jest-extended의 커스텀 매처를 인식하지 못해서 발생하는 문제입니다. 이 문제를 해결하기 위해 몇 가지 접근법을 시험해 볼 수 있습니다.

타입 선언 파일 수정:
global.d.ts에서 타입 확장을 좀 더 명확하게 해보세요. 아래와 같은 형식으로 작성하는 것을 추천드립니다.

   import "jest-extended";
   
   declare global {
     namespace jest {
       interface Matchers<R> extends jestExtended.Matchers<R> {}
     }
   }

이 작업은 jest의 기본 매처에 jest-extended 매처를 추가하여 TypeScript가 이를 인식하도록 합니다.

tsconfig.json 확인:
tsconfig.json에 typeRoots가 제대로 설정되어 있는지 확인하세요. TypeScript가 node_modules 내의 타입 선언 파일들을 인식해야 합니다.

   {
     "compilerOptions": {
       "typeRoots": ["./node_modules/@types", "./global.d.ts"]
     }
   }

패키지 설치 확인:
jest-extended가 프로젝트에 제대로 설치되어 있는지 확인하세요. 터미널에서 npm install jest-extended --save-dev 명령어를 사용해 패키지를 설치하세요.
VSCode에서의 특이 현상:
VSCode에서 특정 파일을 열었을 때 에러가 사라지는 현상은 캐시나 인덱싱 문제일 수 있습니다. 이 경우 VSCode를 재시작하거나, 프로젝트 폴더를 한 번 닫았다가 다시 열어보세요.

위의 방식들이 문제를 해결하는 데 도움이 될 수 있습니다. 아래 유사한 주제를 다룬 예제를 참고하시면 좋을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변