개요
현재 학과를 통해 인턴을 하고 있는 회사에서는 Vue.js와 Node.js를 사용하고 있다. 둘 다 처음 접하는 기술 스택이라 코드 읽기도 벅찬데, 교수님께서 회사에 방문하셔서 인턴하는 학생들에게 중장기적인 task를 줬으면 좋겠다고 하셨다.
그렇게 vue.js랑 node.js를 본 지 일주일 밖에 지나지 않은 나는 사내 소스코드에서 보완할 점을 (강제로) 생각하게 되었다. 며칠 머리를 쥐어짜서 생각해 낸 것이 바로 테스트 코드였다.
사내 소스코드는 테스트 코드가 하나도 쓰여있지 않은 상태였고, 지금 와서 생각해보면 스스로 극한직업을 선택한 것 같지만.. 테스트 코드 일대기를 한 번 써보도록 하겠다.
Jest
Jest는 페이스북에서 만든 자바스크립트 테스팅 라이브러리이다. 모든 테스트를 병렬로 실행하며 빠르고 안전하다는 장점이 있다. 이전 라이브러리들에 비해 설치가 쉽고 간단하기도 한 장점이 있는데, 이미 대규모로 기능이 구현된 소스코드에 적용하려는 내 입장에서는 어려움이 좀 있었다. 그치만 Jest가 현재 대세인 것은 부정할 수 없다!
초기 상태
소스코드를 처음 열었을 때, package.json에 jest, vue-jest, ts-jest, @vue/test-utils는 설치되어 있었고, jest.config.js도 아래처럼 기본 설정으로 되어있었다.
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
],
}일단 처음 상태에서 yarn test를 실행해보았다.
ERROR(1) - Cannot find module 'babel-core'
딱봐도 babel-core가 설치되어 있지 않은가 보다 해서 babel-core을 추가해주었다.
yarn add --dev babel-core추가해준 다음, 간단하게 .vue 파일과 .vue 파일을 테스트하는 코드를 작성하였다.
Greeting.vue
<template>
<div>
{{ greeting }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data() {
return {
greeting: 'Vue and TDD',
}
},
}
</script>greeting.spec.js
import { mount } from '@vue/test-utils'
import Greeting from '@/pages/Greeting.vue'
describe('Greeting.vue', () => {
it('greeting을 렌더한다', () => {
const wrapper = mount(Greeting)
console.log(wrapper.html())
expect(wrapper.html().includes('Vue and TDD')).toBe(true)
})
})그리고 다시 테스트 코드를 실행해보았다.
ERROR(2) - SyntaxError: Cannot use import statement outside a module
Jest를 적용할 때 가장 유명한 에러인듯 하다.
Jest를 도입할 때, import부터 오류가 난다면 babel이 제대로 트랜스파일링을 하지 못하고 있는 것이라고 한다. 소스 코드에는 babel과 관련한 설정 파일이 단 하나도 없었다.
여기서 babel을 사용하는 이유는, 테스트는 Node.js 환경에서 이루어지기 때문에 기본적으로는 테스트 코드에 import 등의 ES6 문법을 사용할 수 없다고 하며, 이를 해결하기 위해서이다.
babel에 대해 이해가 잘 되지는 않았지만, 나는 당장 테스트 코드에 대한 진전을 이루어내야 했기에 며칠을 구글링하면서 이것저것 시도해보았고, 찾아낸 실마리는 아래와 같다.
우선 babel.config.js를 작성한다.
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
],
}그리고 @babel/preset-env와 @babel/cli를 설치해준다.
yarn add --dev @babel/preset-env그랬더니 아래와 같은 문제가 발생했다.
ERROR(3) - ERROR: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".
버전 문제라는 것을 직감했다. 버전을 올려주자.
yarn add --dev babel-core@7.0.0-bridge.0
일단 간단하게 만들어준 vue에서는 성공이다...! 그러나, vuetify가 잔뜩 들어있는 소스코드에서는 아직 에러가 발생한다. 이 에러는 vue-test-utils을 차근차근 학습하면서 잡아보도록 하겠다.
