[Vue] Jest에서 SVG 파일을 구성 요소로 테스트하는 방법

개시하다

Jest는 최근 길거리에서 인기를 끌고 있는 테스트 프레임워크다.
이번에는 SVG 파일이 포함된 Vue 파일을 Jest 테스트로 활용하기 위해 조금 머리를 써서 공유하려고 글을 썼어요!

vue-jest의 SVG 파일 구성 요소 테스트 정보

Jest를 사용하여 Vue 구성 요소를 테스트할 때 사용vue-jestvue-jest 기본적으로 SVG 파일을 구성 요소로 사용하는 방법이 제공되지 않습니다.
그래서 프로그램 라이브러리를 찾으면jest-transform-stub : https://www.npmjs.com/package/jest-transform-stub jest-svg-transformer : https://www.npmjs.com/package/jest-svg-transformer svg-react-transformer : https://github.com/mapbox/svg-react-transformer
라고 적었다.
Vue 프로젝트라서 react가 필요해서 좀...그렇게 생각하지만.jest-svg-transformer는 이미 즉시 사용되었다.
그런데 왜 여기도react에 의존하는지...jest-transform-stub SVG 파일을 어셈블리로 사용할 때는 사용할 수 없습니다.
네??어떻게 해야 할지 생각하면서 아래의 issue에 도착했다.
https://github.com/visualfanatic/vue-svg-loader/issues/38 vue-svg-loader의 issue는 왠지 예의 바르게 vue-jest에svg 파일을 읽는 방법을 기술했다.
기본적으로 처리하세요...
다음은 설치 예입니다.svgTransFormer.js는 Jest가 SVG 파일 구성 요소를 읽을 때 테스트하는 설정 파일입니다.

const vueJest = require('vue-jest/lib/template-compiler');

module.exports = {
  process(content) {
    const { render } = vueJest({
      content,
      attrs: {
        functional: false,
      },
    });

    return `module.exports = { render: ${render} }`;
  },
}

Jest의 설정은 다음과 같습니다.

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "vue",
      "svg"
    ],
    "transform": {
      "^.*\\.vue$": "vue-jest",
      "^.*\\.svg$": "./svgTransFormer.js",
    },
    "testMatch": [
      "<rootDir>/**/__tests__/*.(spec|test).js?(x)"
    ]
}

끝말

이번에는 이게 다야.
잘못이나 질문이 있으면 댓글로 남겨주세요!