Vuetify Unit Testing

이전 글의 테스트 세팅 환경에서 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)
  })
})

잘 실행되는 것을 볼 수 있다!