질문 - [Vue warn]: Failed to resolve directive: masonry

[m-fire]

안녕하세요 패캠에서 어떻게 질문할 수 있을까 하다가 이쪽으로 오게되었어요 :)
강의영상을 vue2 cli + TS 도입 버전으로 잘 만들면서 따라오다가,
막히는 부분이 생겨서 질문드리게 되었어요.

[Vue.js 압축 완성 올인원 패키지 Online. > Ch 05. Vue 단위 테스트 - 23. 예제 2 - MovieList Component test II]
** -영상: 10:38 부분 -**

강의내용과 다른 질문을 드려야 할까 고민했는데요, 검색중에 너무 자료가 나오지 않아
혹시 이 부분에 대해 조언을 구해보고자 남기게 되었습니다.

제가 겪는 상황은 vue-masonry 관련 이슈인데요, 테스트는 통과했으나, 거슬리는 WARN 메세지가 계속 뜹니다.
아래는 문제의 애러 메세지입니다.

console.error
    [Vue warn]: Failed to resolve directive: masonry
.
.
.

jest.config.js

const jestConfig = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',

  roots: ['<rootDir>/src/test/'],

  testMatch: ['**/__tests__/**/*.{js,ts}', '**/?(*.)+(spec|test).{js,ts}'],

  moduleFileExtensions: ['ts', 'jsx', 'js', 'jsx', 'json', 'vue'],

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/main/$1',
    '^@test/(.*)$': '<rootDir>/src/test/$1',
  },
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': '@vue/vue2-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },

  setupFilesAfterEnv: ['./jest.setup.js'],
};
.
.
.

package.json

{
  "name": "vuejs-compress-completion",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --host localhost --port 3000",
    "test": "jest --watchAll",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "dayjs": "^1.11.4",
    "https-browserify": "^1.0.0",
    "lodash": "^4.17.21",
    "lowdb": "^3.0.0",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "scroll-to": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "vue": "^2.6.14",
    "vue-masonry": "^0.16.0",
    "vue-router": "^3.5.1",
    "vuetify": "^2.6.0",
    "vuex": "3.6.2"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/lodash": "^4.14.182",
    "@types/node": "^18.7.3",
    "@types/webpack": "^5.28.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "crypto-random-string": "^5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "fibers": "^5.0.2",
    "jest": "^27.0.5",
    "prettier": "^2.4.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5",
    "typescriptcollectionsframework": "^4.4.13",
    "vue-cli-plugin-vuetify": "~2.5.1",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },
  "packageManager": "yarn@3.2.2"
}

WARN 메세지 제거를 하려면 어떻게 접근해야 할까요..? 조언을 구합니다.
읽여주셔서 고맙습니다.

[ParkYoungWoong]

@m-fire
안녕하세요.
이 이슈를 이제 발견해서 답변드려요.
많이 기다리셨을 텐데 죄송합니다.
혹시 메일(thesecon@gmail.com)로 연락주시면 제가 좀 더 빠르게 확인할 수 있습니다.

CLI나 Jest 같은 패키지 버전이 달라지면 사용 상황도 같이 달라지는 경우가 많습니다.
특히나 TS도 적용하셨다면 더 다를 수 있을 듯해요.

테스트 중 발생하는 에러를 보니, Jest가 v-masonry와 v-masonry-tile 디렉티브를 해석하지 못하는 것 같네요.
일단 테스트 파일에 다음 코드가 없을 텐데, 추가해서 테스트해보세요.

import { VueMasonryPlugin } from 'vue-masonry'

localVue.use(VueMasonryPlugin

추가로 TS를 사용하고 있으니, vue-masonry 패키지의 타입 확인이 필요할 수 있을 것 같아요.
vue-masonry는 @types가 없어서, (문제가 있다면) 사용하는 부분만 따로 타이핑 하는 것도 고려해보세요.