[타입스크립트] jest , import svg 할때 생기는 문제점에 대하여

이번 포스트는 정확한 지식이 아닐지도 모른다는 두려움을 가지고 글을 시작하겠습니다.(아직 공부중이라..ㅜㅜ) 

타입스크립트로 마이그레이션 하는 도중에 기존에 없었던 테스트 코드를 작성해보자고 마음을 먹고 facebook에서 만든 Jest를 사용해보고자 했습니다.

Jest를 선택한 이유는 Jest 홈페이지 첫 화면에 있습니다.  ==> 홈페이지( jestjs.io/ )

Babel, Typescipt, Node, React를 제가 사용하고 있기 때문에 제 상황에 아주아주 적절한 테스팅 프레임워크라고 판단했습니다.

이러한 이유로 공식문서를 읽어가며 함수에 대한 테스트 코드를 만들고 이젠 class에 대해 테스트 코드를 만들고 테스트를 실행했는데!! FAIL이 떠버립니다.

 

안되는 이유는 다양하니 어떤 이유로 안 되는 것인지 판단이 어렵습니다. ㅜㅜ 게다가 가장 의심스러운 Babel 관련 설정은 이미 제 손을 떠났으며, Babel 설정은 보면 볼수록 어려운 녀석이라.. 고민을 해보다가 서치를 시작해봤습니다.

---

https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file

Jest cannot load svg file

그리고 첫 따봉을 보니

jest doesn't know how to load other file extensions than js/jsx,you need to find the jest.config.js
and add transformer for svg files.

'jest는 니가 어떤 파일을 load했는지 모른다. 따라서 jest.config.js에 svg 파일을 변환할 필요가 있다'라고 되어있어서 해당 추천 방법에 따라 해 봤는데 실패했습니다.

 

그 후에 두번째를 보니 

Another easier option to solve this problem is jest-svg-transformer.

jest-svg-transformer에 대해 추천을 해줬습니다.

www.npmjs.com/package/jest-svg-transformer

jest-svg-transformer

설명글을 보아하니

Very useful with react-svg-loader. This allows you to import svgs directly into your react components, but still have nice snapshots.

아주 유용할 것만 같은 생각이 듭니다. directly import를 해준다니.. 뭔가 해당 클래스와 svg 파일을 엮어주는 그런 라이브러리인가 생각이 들었습니다.

사용법은 아주 짧은 코드가 있습니다. 

{
    "jest": {
        "transform": {
            "^.+\\.jsx?$": "babel-jest",
            "^.+\\.svg$": "jest-svg-transformer"
        }
    }
}

이걸 어디에다가 쓰라고.. 아마도 jest.config.js에다 쓰는 것일 겁니다. jest.config.js 파일을 보니 transform 보다는 moduleNameMapper에 쓰는 것이 맞을 듯합니다. (  테스트로 transform 안에다 하니 같은 error가 뜹니다 )

//jest.config.js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  moduleDirectories: ["node_modules", "src"],
  roots: ["<rootDir>/src", "<rootDir>/res"],

  testMatch: ["**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "^src/(.*)$": "<rootDir>/src/$1",
    "^.+\\.(css|less|scss|otf)$": "babel-jest",
    "^.+\\.svg$": "jest-svg-transformer", // <- 새롭게 추가
  },
};

원래라면 jest.config.js 파일이 위 코드처럼 안 생겼습니다. 하지만 저는 Babel을 설정하면서 src, res의 분리하였습니다.

아마도 여기서 문제가 발생했을 것이라 생각했습니다. 같은 폴더 안에 넣지 않고 루트 디렉터리를 분리하여 거기서 이미지를 당겨 썼기 때문입니다. 리소스 파일과 소스파일을 분리해서 관리하는데 여기에  Babel 설정으로 분리해버렸으니 못찾았을 것이라 생각합니다.

근데 여기서 jest-svg-transformer로 svg 파일은 해당 라이브러리로 설정을 바꿔주니 All PASS 가 떴습니다!!

---

다행스럽게도 계속 테스트 코드를 작성할 수 있게 되었습니다. 

예제 코드는 항상 되는데, 제 코드는 항상 한 번에 안 되는 이유는 제가 온전히 이해를 하지 못한 채 프로그래밍을 하고 있어서 비롯된 일일 것이라 생각하고

오늘도 반성하면서 또 프로그래밍을 하러 가봐야겠습니다.