Vue + jest + typescript 세팅

🎾  pacakge.json 설치

npm install --save-dev jest @vue/test-utils
npm i @vue/vue3-jest
npm install --save-dev @vue/test-utils
npm install --save-dev ts-jest
npm install --save-dev @types/jest
npm install --save-dev @babel/core 
npm install --save-dev @babel/preset-env 
npm install --save-dev @babel/preset-typescript 
npm install --save-dev jest-environment-jsdom 
npm install --save-dev jest-transform-stub

 

 

😆 tsconfig.json(타입스크립트 환경)

{
  "compilerOptions": {
    "types": [
      "jest"
    ]
  }
}

🦶 babel.config.json

{
  "presets": ["@babel/preset-env","@babel/preset-typescript"]
}

 

👧 jest.config.js(jest 환경세팅)

module.exports = {
   moduleFileExtensions: [
      'js',
      'ts',
      'json',
      // 모든 vue 파일(`*.vue`)을 처리하기 위해 Jest에게 알려줍니다
      'vue'
   ],
   transform: {
      // process `*.vue` files with `vue-jest`
      '.*\\.(vue)$': '@vue/vue3-jest',
      '^.+\\.tsx?$': 'ts-jest',
      '.*\\.(js)$': 'babel-jest',
      '.*\\.(ts)$': 'babel-jest',
      '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
   },
   moduleNameMapper: {
      // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
      '^@/(.*)$': '<rootDir>/src/$1'
   },
   testMatch: ['**/*.spec.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
   // node_modules 경로 하위에 있는 모든 테스트 파일을 대상에서 제외합니다
   testPathIgnorePatterns: ['/node_modules/'],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
      customExportConditions: ['node', 'node-addons']
   },
   transformIgnorePatterns: ['node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)']
};

 

🧑 package.json(명령어 등록)

{
  
  "scripts": {
    "test:unit": "jest --watchAll"
  }
}

 

👶명령어 실행

npm run test:unit