lottie, $route 모킹

🍟 lottie 오류1

lottie를 사용할 경우 아래와 같은 오류가 발생하였다. 보통 외부라이브러리에서 발생하는데, 

아래오 같이 발생할 경우 jest.config.js에서  "transformIgnorePatterns" 에 vue-lottie를 추가해준다.

 

jest.config.js

/* vue-lottie 추가 */
module.exports = {
	transformIgnorePatterns: ['<rootDir>/node_modules/(?!(particles-bg-vue)|(?!@scu/vue)|(?!(vue-lottie))/)'],
}

 

🥗 lottie 오류2

lottie오류1을 해결했음에도 불구하고, HTMLCanvasElemnt관련한 오류가 발생하였다.

 

 

그래서 "jest-canvas-mock"을 추가하였다.

https://www.npmjs.com/package/jest-canvas-mock

jest-canvas-mock

 

그리고, jest.config.js에서 setUpFiles에 추가하였다.

module.exports = {
	setupFiles: ["jest-canvas-mock"]
}

 

 

🫔 $route 오류

테스트코드 작성시 $route관련하여, undefined 오류가 발생하였다.

이러한 경우는 shallMount에서 $route를 모킹 처리가 필요하다.

 

 

shallMount에서 $route에 name프로퍼티를 추가한다.

import LottieComp from '@/components/lottie/LottieComp.vue'
import { shallowMount } from '@vue/test-utils';
describe('', () => {
  test('should ', async () => {
    shallowMount(LottieComp, {
      mocks: {
        $route: {
         /* name 프로퍼티 추가 */
          name: 'go'
        }
      }
    })
  });
});