Jest μ†Œκ°œ

제슀트(Jest)λŠ” νŽ˜μ΄μŠ€λΆμ—μ„œ λ§Œλ“  μžλ°”μŠ€ν¬λ¦½νŠΈ ν…ŒμŠ€νŒ… λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œμ˜ λͺ¨μ–‘이 직관적이고 λ¬Έμ„œν™”κ°€ μž˜λ˜μ–΄ μžˆμ–΄ μš”μ¦˜ 많이 ν™œμš©λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

라이브러리 μ„€μΉ˜

μ œμŠ€νŠΈλŠ” NPM으둜 μ•„λž˜μ™€ 같이 μ„€μΉ˜ν•©λ‹ˆλ‹€.

npm install --save-dev jest

ν…ŒμŠ€νŠΈ 파일 생성

  • 파일 μœ„μΉ˜ : ν…ŒμŠ€νŠΈ ν•  파일이 μžˆλŠ” 폴더 λ‚΄
  • 폴더 이름 : __test__
  • 파일 이름 : 파일 이름.test.js λ˜λŠ” 파일 이름.spec.js

ν…ŒμŠ€νŠΈ μ½”λ“œ μ‹€ν–‰

제슀트λ₯Ό μ„€μΉ˜ν•˜κ³  λ‚˜λ©΄ μ½˜μ†” 창에 μ•„λž˜μ™€ 같은 λͺ…λ Ήμ–΄λ‘œ μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

jest

μœ„μ˜ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜λ©΄ ν”„λ‘œμ νŠΈ λ‚΄λΆ€μ˜ test.js λ˜λŠ” spec.js ν™•μž₯자λ₯Ό κ°€μ§€λŠ” νŒŒμΌμ„ λͺ¨λ‘ μ‹€ν–‰ν•©λ‹ˆλ‹€.

NPM μ»€μŠ€ν…€ λͺ…λ Ήμ–΄λ‚˜ npm t둜 ν…ŒμŠ€νŠΈλ₯Ό μ‹€ν–‰ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ μ½”λ“œ μ˜ˆμ‹œ

κ°„λ‹¨ν•œ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μ•„λž˜μ™€ 같이 μž‘μ„±ν•΄λ΄€μŠ΅λ‹ˆλ‹€.

// helloworld.test.js
const str = 'Hello World';

test('HelloWorld Component', () => {
  expect(str).toBe('Hello World');
});

μœ„ μ½”λ“œλŠ” str의 값이 Hello Worldκ°€ λ§žλŠ”μ§€ ν™•μΈν•˜λŠ” ν…ŒμŠ€νŠΈ μ½”λ“œμž…λ‹ˆλ‹€. 일반적으둜 ν…ŒμŠ€νŠΈ μ½”λ“œμ—λŠ” κΈ°λŒ€κ°’κ³Ό 결과값이 ν•„μš”ν•œλ° μœ„ μ½”λ“œμ²˜λŸΌ expect()에 κΈ°λŒ€κ°’μ„ λ„£κ³ , toBe()에 μ˜ˆμƒ 결과값을 λ„£μœΌλ©΄ λ©λ‹ˆλ‹€.

이제 μ½˜μ†”μ— jest λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜λ©΄ λ‹€μŒκ³Ό 같은 ν…ŒμŠ€νŠΈ κ²°κ³Όκ°€ λ‚˜μ˜΅λ‹ˆλ‹€.

Jest둜 ν…ŒμŠ€νŠΈν•œ κ²°κ³Ό

helloworld.test.js νŒŒμΌμ—μ„œ 1개의 ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό λŒλ €μ„œ μ„±κ³΅ν–ˆλ‹€λŠ” λ‘œκ·Έμž…λ‹ˆλ‹€.

Jest API

Jest둜 λ‹¨μœ„ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό κ΅¬ν˜„ν•  λ•Œ 자주 μ‚¬μš©λ˜λŠ” API λͺ©λ‘μž…λ‹ˆλ‹€.

  • describe()
  • test()
  • expect()
  • beforeEach()

describe()

μ—¬λŸ¬ 개의 test() μ½”λ“œλ₯Ό ν•˜λ‚˜μ˜ ν…ŒμŠ€νŠΈ μž‘μ—… λ‹¨μœ„λ‘œ λ¬Άμ–΄μ£ΌλŠ” API. ν•˜λ‚˜μ˜ ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ₯Ό test()라고 ν•œλ‹€λ©΄ describe()λŠ” μ—¬λŸ¬ 개의 ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ₯Ό ν•˜λ‚˜μ˜ 그룹으둜 λ¬Άμ–΄μ£ΌλŠ” μ—­ν• .

describe('Testing 1', () => {
  test('message equals to be Vue', () => {
    // ..
  });

  test('data equals to be Object', () => {
    // ..
  });
});

test()

ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό 돌리기 μœ„ν•œ API. ν•˜λ‚˜μ˜ ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ₯Ό μ˜λ―Έν•˜λ©° it()κ³Ό 같은 μ—­ν• .

test('message equals to be Vue', () => {
  // ..
});

expect()

ν…ŒμŠ€νŠΈ ν•  λŒ€μƒμ„ λ„£λŠ” API. expect()μ—λŠ” 주둜 ν…ŒμŠ€νŠΈ μž…λ ₯ κ°’ λ˜λŠ” κΈ°λŒ€ 값을 λ„£μŠ΅λ‹ˆλ‹€.

var message = 'Vue';
test('message equals to be Vue', () => {
  expect(message).toBe('Vue');
});

toBe()

ν…ŒμŠ€νŠΈμ˜ κ²°κ³Όλ₯Ό ν™•μΈν•˜λŠ” API. ν…ŒμŠ€νŠΈμ˜ μ˜ˆμƒ κ²°κ³Ό 값을 λ„£μŠ΅λ‹ˆλ‹€.

var message = 'Vue';
test('message equals to be Vue', () => {
  expect(message).toBe('Vue');
});

ν…ŒμŠ€νŠΈ κ²°κ³Ό κ°’ APIμ—λŠ” toBe() 뿐만 μ•„λ‹ˆλΌ toHaveBeenCalled(), toBeTruthy(), toBeFalsy() λ“± μ—¬λŸ¬ μœ ν˜•μ΄ μžˆμŠ΅λ‹ˆλ‹€. μžμ„Έν•œ 건 Jest - Expect APIμ—μ„œ ν™•μΈν•΄λ³΄μ„Έμš”.

beforeEach()

ν…ŒμŠ€νŠΈ 파일의 각 ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ 돌기 전에 μˆ˜ν–‰ν•  λ‘œμ§μ„ λ„£λŠ” API. ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ§ˆλ‹€ λ°˜λ³΅λ˜λŠ” λ‘œμ§μ„ 넣기에 적합.

var message;
beforeEach(() => message = 'Vue');

test('message equals to be Vue', () => {
  expect(message).toBe('Vue');
});

test('message equals to be Vue!!', () => {
  expect(message + '!!').toBe('Vue');
});

Jest의 λ·° μ»΄ν¬λ„ŒνŠΈ ν…ŒμŠ€νŒ…

μ§€κΈˆκΉŒμ§€ μ œμŠ€νŠΈμ— λŒ€ν•΄μ„œ κ°€λ³κ²Œ μ‚΄νŽ΄λ΄€μœΌλ‹ˆ μ΄λ²ˆμ—” 제슀트둜 λ·° μ»΄ν¬λ„ŒνŠΈλ₯Ό ν…ŒμŠ€νŠΈν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. μ•„λž˜λŠ” 제슀트둜 λ·° μ»΄ν¬λ„ŒνŠΈλ₯Ό ν…ŒμŠ€νŠΈν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

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

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

test('HelloWorld Component', () => {
  expect(true).toBe(true);
});

μœ„μ˜ ν…ŒμŠ€νŠΈ μ½”λ“œλŠ” μ œμŠ€νŠΈμ—μ„œ HelloWorld μ»΄ν¬λ„ŒνŠΈλ₯Ό 인식할 수 μžˆλŠ”μ§€ ν™•μΈν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€. ν…ŒμŠ€νŠΈμ˜ κΈ°λŒ€ κ°’κ³Ό κ²°κ³Ό 값은 true둜 μΌμΉ˜ν•˜κΈ° λ•Œλ¬Έμ— HelloWorld μ»΄ν¬λ„ŒνŠΈλ§Œ 잘 λ“€κ³ μ˜¨λ‹€λ©΄ μ‹€νŒ¨ 없이 ν…ŒμŠ€νŠΈκ°€ μ™„λ£Œλ©λ‹ˆλ‹€.

ν•˜μ§€λ§Œ, μ‹€μ œλ‘œ 싀행해보면 ν…ŒμŠ€νŠΈκ°€ μ‹€νŒ¨ν•˜λ©΄μ„œ μ•„λž˜μ™€ 같은 κ²°κ³Όκ°€ λ‚˜μ˜΅λ‹ˆλ‹€.

Jest의 λ·° μ»΄ν¬λ„ŒνŠΈ νŒŒμ‹± μ—λŸ¬

μœ„ λ©”μ‹œμ§€λŠ” 'λ·° μ»΄ν¬λ„ŒνŠΈλŠ” μ œμŠ€νŠΈκ°€ 해석할 수 μžˆλŠ” μœ ν˜•μ˜ 파일이 μ•„λ‹ˆλ‹€' λΌλŠ” μ˜λ―Έμž…λ‹ˆλ‹€. 생각해보면 μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈκ°€ μ›ΉνŒ©μ˜ λ·° λ‘œλ”λ‘œ ν•΄μ„λ˜μ–΄μ„œ μ›Ή μžμ›μœΌλ‘œ μ΅œμ’… λ³€ν™˜λ˜κΈ° λ•Œλ¬Έμ— μ œμŠ€νŠΈλ„ μ΄λ ‡κ²Œ λ³€ν™˜ν•΄μ£ΌλŠ” 도ꡬ가 ν•„μš”ν•  것 κ°™μŠ΅λ‹ˆλ‹€.

그럼 λ‹€μŒ μ±•ν„°μ—μ„œ λ·° ν…ŒμŠ€νŒ…μ„ λ„μ™€μ£ΌλŠ” 도ꡬ인 Vue Test Utils에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.