๋ทฐ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์‹œ์ž‘ํ•˜๊ธฐ

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

๋ทฐ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์˜ˆ์‹œ

์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  npm t๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

<!-- HelloWorld.vue -->
<template>
  <div>Hello {{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue!'
    }
  }
}
</script>
// helloworld.test.js
import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';

test('HelloWorld Component', () => {
  const cmp = new Vue(HelloWorld).$mount();
  expect(cmp.message).toBe('Vue!');
});

์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋ฉด HelloWorld ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๋กœ๋”ฉ๋˜๋ฉด์„œ ํ…Œ์ŠคํŠธ๊ฐ€ ํ†ต๊ณผ๋ฉ๋‹ˆ๋‹ค.

HelloWorld ์ปดํฌ๋„ŒํŠธ ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ์ฃผ์˜ํ•˜์„ธ์š”.

๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ API๋ฅผ ์ด์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ

์•ž์—์„œ ์‚ดํŽด๋ณธ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์˜ ๋ฒˆ๊ฑฐ๋กœ์šด ์ ์€ ์ปดํฌ๋„ŒํŠธ์˜ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•ด ๋งค๋ฒˆ ๋ทฐ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ณ  $mount() API๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.

๋‹คํ–‰ํžˆ๋„ ๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ด ๋ฐ˜๋ณต ์ž‘์—…์„ ํŽธํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” API๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ shallowMount()์™€ mount()์ž…๋‹ˆ๋‹ค. ์ด ๋‘ API์˜ ์ฐจ์ด์ ์€ Testing Applications - API ์ฑ•ํ„ฐ์—์„œ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ณ , ๋จผ์ € shallowMount() API๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์•ž์—์„œ ์‚ดํŽด๋ณธ ์ฝ”๋“œ์— shallowMount() API๋ฅผ ์ ์šฉํ•ด๋ดค์Šต๋‹ˆ๋‹ค.


ย 



ย 



// helloworld.test.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

test('HelloWorld Component', () => {
  const wrapper = shallowMount(HelloWorld);
  expect(wrapper.vm.message).toBe('Vue!');
});

๋ทฐ ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ shallowMount() API๋ฅผ ๋ถˆ๋Ÿฌ์˜จ ํ›„ HelloWorld ์ปดํฌ๋„ŒํŠธ์˜ message ์†์„ฑ์„ ํ…Œ์ŠคํŠธ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์•ž์„œ ์‚ดํŽด๋ณธ ์ฝ”๋“œ์™€ ์ฐจ์ด๋‚˜๋Š” ๋ถ€๋ถ„์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

// ๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ API๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ
const cmp = new Vue(HelloWorld).$mount();
// ๋ทฐ ํ…Œ์ŠคํŠธ ์œ ํ‹ธ API๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ
const wrapper = shallowMount(HelloWorld);

new Vue().$mount()๋กœ ์ ‘๊ทผํ•˜๋˜ ํ˜•์‹์„ mount()๋กœ ๊ฐ„์†Œํ™” ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŒ… ๊ด€๋ จ API

์•ž์—์„œ ์‚ดํŽด๋ณธ shallowMount() API ์ด์™ธ์— mount() API๋„ ํ…Œ์ŠคํŠธ ํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. shallowMount()๋Š” ์ง€์ •๋œ ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด์šฉ๋งŒ ํ…Œ์ŠคํŠธํ•  ๋•Œ ์‚ฌ์šฉํ•˜๊ณ , mount()๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์— ๋“ฑ๋ก๋œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด์šฉ๋“ค๊นŒ์ง€ ํ™•์ธํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ Testing Applications - API์—์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.