[TypeScript/Jest] jest.setup.js를 설정했는데도 jest-dom 타입 오류가 뜨는 문제

 

설치한 라이브러리

npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react

 

 

 

이전에 작성한 jest 설정 코드

(jest.setup.js)

import '@testing-library/jest-dom'


(jest.config.js)

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  rootDir: '.',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/app/$1',
  },
  moduleDirectories: ['node_modules', '<rootDir>/'],
  transformIgnorePatterns: ['/node_modules/(?!(lodash)/)'],
  testEnvironment: 'jsdom',
}

module.exports = createJestConfig(customJestConfig)

 

 

jest.setup.js는 모든 테스트 파일에 적용되는 글로벌 설정이다. 따라서 각 파일마다 @testing-library/jest-dom을 import 하지 않아도 된다.

 

이렇게 하면 될 줄 알았는데.. 여전히 테스트 코드에서 사용한 toBeInTheDocument()에서  'JestMatchers<HTMLElement>' 형식에 'toBeInTheDocument' 속성이 없습니다.ts(2339) 이런 타입 오류가 떴다.

 

 

찾아보니 ts.config.json에 jest.setup.js를 타입으로 include 해야 했다... 이전엔 jest.config.js를 include 했는데 동작하지 않았고, 오히려 jest.config.js는 없어도 테스트가 잘 됐다. 

(tsconfig.json)

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./app/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "jest.setup.js"],
  "exclude": ["node_modules", ".next"]
}

 

 

이걸 넣어주니 오류 없이 잘 동작했다!

 

 

 

참고

https://github.com/testing-library/jest-dom#with-typescript