Unit Test: 테스트 환경 설정
-
패키지 설치
npm i -D jest @vue/test-utils@next vue-jest@next babel-jest -
jest.config.js
module.exports = { moduleFileExtensions: [ 'js', 'vue' ], moduleNameMapper: { '^~/(.*)$': '<rootDir>/src/$1' }, modulePathIgnorePatterns: [ '<rootDir>/node_modules', '<rootDir>/dist' ], testURL: 'http://localhost/', transform: { '^.+\\.vue$': 'vue-jest', '^.+\\.js$': 'babel-jest' } }-
moduleFileExtensions파일 확장자를 지정하지 않은 경우 Jest가 검색할 확장자 목록이다.
일반적으로 많이 사용되는 모듈의 확장자를 지정한다. -
moduleNameMapper틸드(~) 같은 경로 별칭을 매핑한다.
<rootDir>토큰을 사용해 루토 경로를 참조할 수 있다.'^~/(.*)$': '<rootDir>/src/$1’
틸드(~/)의 슬래쉬로 시작하는 경로별칭은 뒤쪽에 있는 값으로 매핑한다. 뒤쪽의 값은<rootDir>은 무시하고 src 디렉토리 안에 있는 모든 경로($1)를 매핑한다는 의미이다. -
modulePathIgnorePatterns테스트 환경에서 무시할 경로들을 불러온다. 즉, 테스틀 하지 않는 것들이다.
-
testURLjsdom은 html 환경이라고 이해하면 된다. 환경에서 문제가 생기지 않도록 localhost의 주소를 명시하여 해결한다.
-
transform정규 표현식을 통해서 vue,js 확장자를 가지는 파일을 발견하면 테스트 환경에서 동작할 수 있는 새로운 코드로 변환해준다.
vue 확장자는 vue-jest 패키지를 통해 변환, js 확장자는 babel-jest 패키지를 통해 변환한다.
-
-
example.test.js
해당 파일에 test() 코드를 작성해준다. 그러면 에러가 발생한다.
해당 함수는 전역이라 오류가 발생하면 안되는데 eslint로 인해 에러가 발생한다.-
.eslintrc.js 수정
env: { browser: true, node: true, jest: true }eslint를 통해서 jest라는 테스트 환경에서 기본적인 문법들이 lint 에러가 발생하지 않도록 옵션을 추가해준 것이다.
해당 수정으로 인해 test 전역 함수의 에러가 발생하지 않는다.
-
