[Vue] jest에서 vuetify 사용하기

■vue로 개발을 하면서 vuetify를 사용하는 사람들을 위해

 

jest에서도 vuetify를 사용할 수 있는 방법이 있는데 다음과 같다.

jest.config.js와 jest.setup.js파일을 생성한다.

 

 

//jest.setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

 

//jest.config.js


module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  // 'collectCoverage': true,
  'coverageReporters': [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/',
  setupFilesAfterEnv: [
    './jest.setup.js'
  ]
}

 

jest.config.js에서 setupFilesAfterEnv에 jest.setup.js을 경로로 넣어주고 jest.setup.js에서 vuetify를 사용한다고 선언한다.

 

 

이후 ~~spec.js 파일에서 다음과 같이 Vue를 import해주면 된다.