본문 바로가기
프론트엔드/단위 테스트

테스트 환경 구성

by step 1 2022. 1. 16.
반응형

패키지 설치

  • jest 설치 명령어: npm i -D jest @vue/test-utils@next vue-jest@next babel-jest

jest환경설정 js파일 생성

  • 루트경로 -> jest.config.js 파일 생성
module.exports = {
  // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다.
  // 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다.
  // E.g. `import HelloWorld from '~/components/HelloWorld';`
  moduleFileExtensions: [
    'js',
    'vue'
  ],

  // `~` 같은 경로 별칭을 매핑합니다.
  // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
  // E.g. `import HelloWorld from '~/components/HelloWorld';`
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  // // 일치하는 경로에서는 모듈을 가져오지 않습니다.
  // // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],

  // jsdom 환경에 대한 URL을 설정합니다.
  // https://github.com/facebook/jest/issues/6766
  testURL: 'https://localhost',

  // 정규식과 일치하는 파일의 변환 모듈을 지정합니다.
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  }
}

 

Jest환경에서 에러발생하지 않도록 .eslintrc.js 파일에 코드 추가

jest: true

 

루트폴더에 tests폴더 생성 -> example.test.js 파일 생성

 

반응형

'프론트엔드 > 단위 테스트' 카테고리의 다른 글

비동기 테스트  (0) 2022.01.19
Jest Matchers 이해  (0) 2022.01.18
Jest Globals  (0) 2022.01.17
첫 테스트  (0) 2022.01.16
테스트 개요  (0) 2022.01.16