typescript 환경에서 Jest 세팅

선다혜·2024년 1월 10일

프로젝트에서 단위테스트, 기능테스트 툴로 Jest를 사용하기로 했는데, yarn test 를 터미널에 입력하면 에러가 발생했다.

에러 코드

unexpected token, expected ","

이렇게 에러가 떴는데, 구글에 찾아보니 비슷한 에러는 꽤 많았는데, 나와 정확히 같은 에러는 없었다. 아마 jest에서 타입 스크립트를 인식하지 못하는 문제인 것 같았다.

1. eslint 설정 변경

.eslintrc.json 파일에서 env에 jest를 추가했다.
⬇️.eslintrc.json

"env": {
    // 전역객체를 eslint가 인식하는 구간
    "browser": true, // document나 window 인식되게 함
    "node": true,
    "es6": true,
    "jest": true
  },

2. jest.config.js 변경

원래는 tsconfig.json 파일에 Jest에 대한 설정도 넣어두었는데, 개발 환경이 되면 compilerOptions의 jsx 값이 내가 설정한 값(react-jsx) 이 아닌 다른 값 (preserve)으로 자동으로 바뀌는 현상이 일어났다. 😂
그래서 jest를 실행시킬 때 ts-jest(기본값) 대신 tsconfig.test.json을 기반으로 실행할 수 있도록 했다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
  },
  setupFiles: ['<rootDir>/setupTests.js'], // jest mocking 세팅
  setupFilesAfterEnv: ['./jest.setup.ts'], // 국제화 관련 세팅
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testMatch: ['<rootDir>/src/**/*.test.tsx'], // 테스트 파일 제한
}

3. setupTests.js 생성 (선택)

이건 추후에 생성한 파일인데, jest로 mocking을 위해 설정했다.

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // 더 필요한 경우 mock 구현
    removeListener: jest.fn(), // 더 필요한 경우 mock 구현
  })),
})

4. package.json 변경

typescript 환경이기 때문에 babel 패키지를 설치했다. 그리고 ts-jest도 설치했다.

{
  "name": "clientnext",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "test": "jest",
    "test:ci": "jest --ci"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-typescript": "^7.23.3",
    "@types/jest": "^29.5.11",
    "jest": "^29.7.0",
    "ts-jest": "^29.1.1",
    "tsconfig-paths": "^4.2.0"
  }
}

5. tsconfig.test.json 생성

2번에서 설정한 파일이다!

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next-i18next.config.js",
    "src/pages/login.test.js",
    "babel.config.js"
  ],
  "exclude": ["node_modules"]
}

이렇게 하면 설정 끝이다!😎