Vue Test Utils

๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ(Vue Test Utils)์€ ์ฝ”์–ด ํŒ€ ๋ฉค๋ฒ„๊ฐ€ ์ œ์ž‘ํ•œ ํ…Œ์ŠคํŒ… ๋ณด์กฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ œ์ŠคํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ํ…Œ์ŠคํŠธ ๋„๊ตฌ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

์ตœ์‹  ๋ทฐ CLI๋ฅผ ์ด์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•œ ๊ฒฝ์šฐ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด Unit Testing ์˜ต์…˜์„ ์„ ํƒํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋ทฐ CLI์—์„œ ํ…Œ์ŠคํŠธ ๋„๊ตฌ ์˜ต์…˜ ์„ ํƒ

Vue CLI ์˜ต์…˜ ์„ ํƒ

Unit Testing ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  ๋‚˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ฐจ๋ก€๋Œ€๋กœ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

  1. ๋จผ์ € ์ฝ”๋“œ ์ •๋ฆฌ ๋„๊ตฌ์ธ Prettier์™€ ๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋„๊ตฌ์ธ ESLint๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋ณด์กฐ ๋„๊ตฌ์™€ ์ฝ”๋“œ ์ •๋ฆฌ ๋„๊ตฌ ์„ ํƒ

  1. ๋‹ค์Œ์€ ๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋„๊ตฌ์˜ ์‹คํ–‰ ์‹œ์ ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์—๋””ํ„ฐ์—์„œ ์ €์žฅ์„ ๋ˆ„๋ฅผ ๋•Œ ๋งˆ๋‹ค ๊ฒ€์‚ฌํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋ณด์กฐ ๋„๊ตฌ์™€ ์ •๋ฆฌ ๋„๊ตฌ ์„ ํƒ

  1. ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ๋„๊ตฌ๋Š” ์ œ์ŠคํŠธ(Jest)๋กœ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋ณด์กฐ ๋„๊ตฌ์™€ ์ •๋ฆฌ ๋„๊ตฌ ์„ ํƒ

  1. ์œ„์—์„œ ์ถ”๊ฐ€ํ•œ ESLint์™€ ํ”„๋ฆฌํ‹ฐ์–ด์˜ ์„ค์ • ๋‚ด์—ญ์„ package.json์— ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ๊ฐœ๋ณ„ ์„ค์ • ํŒŒ์ผ์— ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ๋ฒ• ๊ฒ€์‚ฌ ๋ณด์กฐ ๋„๊ตฌ์™€ ์ •๋ฆฌ ๋„๊ตฌ ์„ ํƒ

๋ ˆ๊ฑฐ์‹œ ๋ทฐ CLI(2.x) ํ”„๋กœ์ ํŠธ์—์„œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

์•„๋ž˜์˜ ๋ช…๋ น์–ด๋กœ ๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

npm install jest @vue/test-utils vue-jest babel-jest --save-dev

์œ„ ๋ช…๋ น์–ด๋กœ vue test util, jest, vue-jest, babel-jest 4๊ฐœ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค.

ํŒจํ‚ค์ง€ JSON ์„ค์ •

์„ค์น˜ํ•˜๊ณ  ๋‚˜์„œ package.json ํŒŒ์ผ์— ์•„๋ž˜์˜ ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // tell Jest to handle `*.vue` files
      "vue"
    ],
    "transform": {
      // process `*.vue` files with `vue-jest`
      ".*\\.(vue)$": "vue-jest",
      // process js with `babel-jest`
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ]
  }
}

JSON ํŒŒ์ผ์ด๋ฏ€๋กœ ๋ณต๋ถ™ํ•  ๋•Œ ์ฃผ์„์€ ์ œ๊ฑฐํ•ด์ฃผ์„ธ์š”.

์ด์ œ ๋‹ค์Œ ์ฑ•ํ„ฐ์—์„œ ๊ฐ„๋‹จํ•œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.