ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ ν•„μš”ν•œ 이유

κ°œλ°œμžμ—κ²Œ ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ ν•„μš”ν•œ μ΄μœ λŠ” μ•„λž˜ 2가지에 μ†Œλͺ¨λ˜λŠ” μ‹œκ°„μ„ 쀄이기 μœ„ν•΄μ„œμž…λ‹ˆλ‹€.

1. 방금 κ΅¬ν˜„ν•œ κΈ°λŠ₯이 잘 λŒμ•„κ°€λŠ”μ§€ ν™•μΈν•˜λŠ” μ‹œκ°„
2. νŠΉμ • κΈ°λŠ₯을 λ³€κ²½ν–ˆμ„ λ•Œ 기쑴에 있던 λ‹€λ₯Έ κΈ°λŠ₯을 κΉ¨νŠΈλ¦¬λŠ”μ§€ ν™•μΈν•˜λŠ” μ‹œκ°„

μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 컀지면 컀질수둝 μœ„ μ‹œλ‚˜λ¦¬μ˜€λ₯Ό μ κ²€ν•˜λŠ”λ° λ§Žμ€ μ‹œκ°„μ΄ μ†Œμš”λ©λ‹ˆλ‹€. 특히 μ§„ν–‰λ˜κ³  μžˆλŠ” ν”„λ‘œμ νŠΈμ— νˆ¬μž…λ˜μ–΄μ„œ 남이 μ§  μ½”λ“œλ₯Ό λ³€κ²½ν•œλ‹€κ³  ν–ˆμ„ λ•Œ, μ½”λ“œλ₯Ό λ³€κ²½ν•˜λŠ” μ‹œκ°„λ³΄λ‹€ κ·Έ μ½”λ“œκ°€ λ‹€λ₯Έ μ½”λ“œμ— μ•…μ˜ν–₯을 μ£ΌλŠ”μ§€ λΆ„μ„ν•˜κ³  ν™•μΈν•˜λŠ”λ° μ‹œκ°„μ΄ 더 많이 λ“€μ–΄κ°€μ£ .

ν…ŒμŠ€νŠΈ μ½”λ“œλŠ” μ΄λŸ¬ν•œ μ‹œκ°„μ„ 쀄여주고 개발자의 μžμ‹ κ°μ„ λ†’μ—¬μ€λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ 많으면 λ§Žμ„μˆ˜λ‘ 더 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ•ˆμ •μ„±μ΄ 높아지죠.

무엇을 μ–΄λ–»κ²Œ ν…ŒμŠ€νŠΈ ν•  것인가?

ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ κ°€μž₯ μ€‘μš”ν•œ 것은 무엇을 μ–΄λ–»κ²Œ ν…ŒμŠ€νŠΈ ν•  것인가 μ •ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ μ½”λ“œμ˜ λͺ©μ μ€ κ΅¬ν˜„λœ μ½”λ“œμ˜ νλ¦„μ΄λ‚˜ λ‘œμ§μ„ ν™•μΈν•˜λŠ” 것이 μ•„λ‹ˆλΌ μ‚¬μš©μžμ˜ κ΄€μ μ—μ„œ λ²„νŠΌ 클릭과 ν‚€ μž…λ ₯ λ“±μ˜ μ΄λ²€νŠΈμ— 따라 UIκ°€ μ˜¬λ°”λ₯΄κ²Œ μ „κ°œλ˜λŠ”μ§€ ν™•μΈν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ μ•„λž˜μ™€ 같은 μ½”λ“œκ°€ μžˆλ‹€κ³  ν•΄λ΄…μ‹œλ‹€.

<template>
  <div>
    <button @click="addCounter">add</button>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    addCounter() {
      this.counter = this.counter + 1;
    }
  }
}
</script>

μœ„ μ½”λ“œλŠ” add λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ counter 값을 1μ”© μ¦κ°€μ‹œν‚€λŠ” μ½”λ“œμž…λ‹ˆλ‹€. 이 μ½”λ“œκ°€ 잘 λ™μž‘ν•˜λŠ”μ§€ μ–΄λ–»κ²Œ 확인할 수 μžˆμ„κΉŒμš”? μ•„λ§ˆ ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ λ”°λ‘œ μ—†λ‹€κ³  κ°€μ •ν•œλ‹€λ©΄ λŒ€λΆ€λΆ„ λ²„νŠΌμ„ 클릭해보고 counter 값이 μ¦κ°€ν•˜λŠ”μ§€ 확인할 κ²λ‹ˆλ‹€.

μ—¬κΈ°μ„œ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μ μš©ν•œλ‹€κ³  ν–ˆμ„ λ•Œ λ‹€μŒ 2가지 μ‹œλ‚˜λ¦¬μ˜€λ₯Ό 점검할 수 μžˆμŠ΅λ‹ˆλ‹€.

1. add λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ 'counter' 값이 μ¦κ°€ν–ˆλŠ”μ§€ 확인
2. add λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ μ¦κ°€λœ 'counter' 값이 화면에 좜λ ₯λ˜λŠ”μ§€ 확인

μœ„ 2개 μ‹œλ‚˜λ¦¬μ˜€ 쀑 μ‚¬μš©μž κ΄€μ μ—μ„œ μž‘μ„±λœ ν…ŒμŠ€νŠΈ μ‹œλ‚˜λ¦¬μ˜€λŠ” 2λ²ˆμž…λ‹ˆλ‹€. 1λ²ˆμ€ λ‹¨μˆœνžˆ μ½”λ“œ κ΄€μ μ—μ„œ λ©”μ„œλ“œκ°€ μ˜¬λ°”λ₯΄κ²Œ λ™μž‘ν•˜λŠ”μ§€ ν™•μΈν•˜λŠ” μˆ˜μ€€μ΄μ£ .

이처럼 ν…ŒμŠ€νŠΈ μ½”λ“œλŠ” κ°œλ°œμžκ°€ κ΅¬ν˜„ν•œ λ‘œμ§μ΄λ‚˜ μ½”λ“œ κ²°κ³Όλ₯Ό κ²€μ¦ν•˜λŠ” 것이 μ•„λ‹ˆλΌ νŠΉμ • μ΄λ²€νŠΈμ— μ˜ν•΄ 변경될 UIλ₯Ό 검증할 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

ν…ŒμŠ€νŒ… 도ꡬ

ν…ŒμŠ€νŒ… λ„κ΅¬λŠ” μš”κ΅¬ 사항 변경에 λ”°λ₯Έ κΈ°λŠ₯ μΆ”κ°€ 및 λ¦¬νŒ©ν† λ§μ„ ν•  λ•Œ μ†Œν”„νŠΈμ›¨μ–΄μ˜ μ•ˆμ •μ„±μ„ λ†’μ—¬μ£ΌλŠ” λ„κ΅¬μž…λ‹ˆλ‹€. λ³΅μž‘ν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μΌμˆ˜λ‘, 그리고 같이 ν˜‘μ—…ν•˜λŠ” νŒ€μ›μ΄ λ§Žμ„μˆ˜λ‘ ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ₯Ό λ°”νƒ•μœΌλ‘œ 각자 κΈ°λŠ₯을 κ΅¬ν˜„ν•˜λ©΄ κΈ°λŠ₯ λ³€κ²½μ—μ„œ μ˜€λŠ” μ—λŸ¬λ₯Ό 미연에 방지할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ‹œμ€‘μ—μ„œ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” ν…ŒμŠ€νŒ… λ„κ΅¬λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

λ‹€μŒ μ±•ν„°μ—μ„œλŠ” Jest에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.