React Testing For Beginners Preview 을 본 후,
Unit Test vs Integration Test: What's the Difference? 을 읽고 얻은 지견을 정리하고 있습니다.

이번에는 아래의 add 함수와 total 함수에 대한 테스트 코드를 작성합니다.

App.js

export const add = (x, y) => x + y

export const total = (shipping, subtotal) => {
    return '$' + add(shipping, subtotal)
}

Unit Test

The idea behind Unit Testing is to test each part of the program and show that the individual parts are correct.

개별 부분이 옳은 것을 나타내는 것이기 때문에, 여기서는 add 함수에 대한 테스트를 가리키고 있습니다.

App.test.js

import { add } from './App'

test('add', () => {
    expect(add(1, 2)).toBe(3)
    expect(add(3, 6)).toBe(9)
    expect(add(3, 6)).toBe(10)
})

결과는 이렇게 됩니다.

add(3, 6) 의 반환값이 10이 아니기 때문에 테스트가 통과하고 있지 않다는 것을 알기 때문에,

It is kind of White Box Testing

입니다.

통합 테스트

combine modules in the application and test as a group to see that they are working fine

모듈을 조합해 정상적으로 기능하는지를 나타내는 것이므로, 여기에서는 add 함수가 조합되고 있는 total 함수에 대한 테스트를 가리키고 있습니다.

App.test.js

import { total } from './App'

test('total', () => {
    expect(total(5, 20)).toBe('$25')
})

이 테스트는 통과합니다.
테스트 코드는 그대로 app関数 가 의도하지 않은 동작이 되었을 때를 확인합시다.

App.js

export const add = (x, y) => x - y  // 間違えて引き算にしてしまった

export const total = (shipping, subtotal) => {
    return '$' + add(shipping, subtotal)
}

테스트는 통과하지 않습니다.

다음으로, 테스트 코드는 그대로, total 함수가 의도하지 않은 동작이 되었을 때를 확인합시다.

App.js

export const add = (x, y) => x + y

export const total = (shipping, subtotal) => {
    return '#' + add(shipping, subtotal) // 間違えて # にしてしまった
}

이 경우에도 테스트는 통과하지 않습니다.

이번은 간단한 코드이므로, 어느 함수가 의도하지 않은 동작이 되어 있는지는 알 수 있다고 생각합니다만, 보다 큰 코드가 되어 가면 모릅니다.
내부적으로 어느 함수에 버그의 책임이 있는지 모르기 때문에,

It is kind of Black Box Testing

입니다.

덤

이번 경우, total 함수의 일을, 조합하는 것만 하면 평화가 된다. (이것이 느슨하게 결합?)

App.js

export const add = (x, y) => x + y
export const doller = () => '$'

export const total = (shipping, subtotal) => {
    return doller() + add(shipping, subtotal)
}

App.test.js

import { add, doller, total } from './App'

test('add', () => {
    expect(add(1, 2)).toBe(3)
})

test('doller', () => {
    expect(doller()).toBe('$')
})

// addとdollerが通ったら必然的に通るから必要ない?
test('total', () => {
    expect(total(5, 20)).toBe('$25')
})