이전 글의 테스트 세팅 환경에서 Vuetify를 사용한 vue 파일을 test하려고 하면 아래와 같이 난리가 나버린다.
console.error
[Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Vuetify components들을 테스트하려면 test setup file에 Vuetify를 설치해주어야 한다.
다음과 같이 jest.config.js
파일에 setupFiles
를 추가해준다.
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',
],
setupFiles: ['./test/setup.js'],
}
그리고 setupFiles를 설정한 경로에 다음과 같이 setup.js
를 생성해 준다.
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
Vue.use(Vuetify)
Vue.use(VueRouter)
이 상태에서 공식문서에 있는대로 yarn test를 실행해 보았다. test 코드는 아래와 같다.
import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
import Login from '@/pages/login'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
describe('Login.vue', () => {
const localVue = createLocalVue()
let vuetify
localVue.use(VueRouter)
const router = new VueRouter()
beforeEach(() => {
vuetify = new Vuetify()
})
it('login을 렌더한다', () => {
const wrapper = mount(Login, { localVue, vuetify, router })
const title = wrapper.text()
console.log(title)
})
})
잘 실행되는 것을 볼 수 있다!