테스트 코드 연습하기

TDD 에서 지향하는 바는 테스트 코드를 먼저 작성하고, 기능을 구현하는 것 입니다. 하지만, 테스트 코드를 잘 작성 할 줄 모른다면 이는 불가능한 일이겠지요? 먼저 아주 간단한 테스트 코드를 작성하는 것을 해봅시다.

이 튜토리얼의 최종 결과물 Github Repo: https://github.com/vlpt-playground/react-testing-recipe

CRA 를 사용하여 프로젝트를 생성해주세요. CRA 에는 Jest 라는 테스트 도구가 내장되어 있어서 별도의 설정 없이 테스트 코드를 작성 할 수 있습니다.

$ yarn create react-app testing-recipe

해당 디렉터리를 열고 src 디렉터리에 sample.js 라는 코드를 다음과 같이 작성해보세요.

sample.js

export const add = (a, b) => a + b;

정말 간단한 코드죠?

이 코드가 정말 잘 작동하는지 확인해봅시다.

sample.test.js 라는 파일을 동일한 디렉터리에 생성하여 다음 코드를 작성해보세요.

테스트 코드를 작성 할 땐 it 함수를 사용하여 테스트에 이름을 붙여주고, expect 를 사용하여 우리가 무엇을 예상하고 있는지 설정 할 수 있습니다.

import { add } from './sample';

it('add', () => {
  const value = add(2, 3);
  expect(value).toBe(5);
});

그리고 나서 터미널 상에 yarn test 명령어를 입력해보세요.

 PASS  src/sample.test.js
  ✓ add (2ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.229s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

위와 같은 결과가 보여졌나요?

한번 add 함수에서 다음과 같이 + 대신에 - 로 치환해보세요.

export const add = (a, b) => a - b;

그러면 테스트를 실행하고 있는 터미널에서 다음과 같은 결과가 나타나게 됩니다.

 FAIL  src/sample.test.js
  ✕ add (9ms)

  ● add

    expect(received).toBe(expected) // Object.is equality

    Expected: 5
    Received: -1

      3 | it('add', () => {
      4 |   const value = add(2, 3);
    > 5 |   expect(value).toBe(5);
        |                 ^
      6 | });
      7 | 

      at Object.toBe (src/sample.test.js:5:17)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.27s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

우리가 예상한 값은 5인데, 결과값은 실제로 -1이 나왔기에 오류가 뜨고있지요. 이제 다시 - 를 + 로 치환하여 오류를 수정하세요.

export const add = (a, b) => a + b;

이번에는 숫자에 곱셈을 해주는 함수를 작성해봅시다. 아까와는 다르게, 테스트 코드부터 작성해봅시다!

sample.test.js

import { add, multiply } from './sample';

it('add', () => {
  const value = add(2, 3);
  expect(value).toBe(5);
});

it('multiply', () => {
  const value = multiply(4, 5);
  expect(value).toBe(20);
});

아직은 multiply 함수가 존재조차 하지 않으니까 오류가 날 것입니다. 이제 코드를 작성하여 오류를 해결시켜줍시다.

sample.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

테스트를 먼저 작성하고 이를 만족하기 위하여 코드를 작성하는 것, 이것이 바로 TDD 흐름입니다!

describe

테스트 코드를 작성 할 때, describe 를 사용하면 여러개의 it 을 하나의 이름으로 묶어 줄 수 있습니다.

sample.test.js

import { add, multiply } from './sample';

describe('sample', () => {
  it('add', () => {
    const value = add(2, 3);
    expect(value).toBe(5);
  });

  it('multiply', () => {
    const value = multiply(4, 5);
    expect(value).toBe(20);
  });
});

이렇게 해주면 터미널 상에서도 두 테스트 코드가 sample 이라는 묶음으로 나타나게 됩니다.

 PASS  src/sample.test.js
  sample
    ✓ add (1ms)
    ✓ multiply

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.302s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

그리고, 만약에 하나라도 실패하게 되면 전체가 실패 됩니다.

간단한 통합 테스트 코드 작성하기

우리가 방금 작성했던 것은 함수를 하나 하나 테스트를 해줬었는데요, 이를 유닛 테스르라고 부릅니다. 이번에는 통합 테스트를 해주겠습니다. 워낙 간단한 코드이긴하지만, 이번에는 1 + 2 * 3 의 결과물이 7이 잘 나타나는지 add 함수와 multiply 함수를 모두 사용하여 테스트를 해보겠습니다.

이번에도 마찬가지로 테스트 코드를 먼저 작성해보세요.

import { add, multiply } from './sample';

describe('sample', () => {
  it('add', () => {
    const value = add(2, 3);
    expect(value).toBe(5);
  });

  it('multiply', () => {
    const value = multiply(4, 5);
    expect(value).toBe(20);
  });

  it('add & multiply', () => {
    const value = add(1, multiply(2, 3));
    expect(value).toBe(7);
  });
});

테스트 코드가 모두 잘 통과 됐나요?

 PASS  src/sample.test.js
  sample
    ✓ add (1ms)
    ✓ multiply
    ✓ add & multiply

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.243s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

테스트 코드 연습하기