단위 테스트 검증

테스트명 짓기

export function add(a,b) {
  const sum = a + b;
  if (sum > 100) {
    return 100;
  }
  
  return sum;
}

//BAD test
test("50 +50은 100", () => {
  expect(add(50,50)).toBe(100);
)

test("70 + 80은 100", () => {
  expect(add(70,80)).toBe(100);
})

테스트는 통과했지만 70 + 80이 100이 된다는 것은 이해할 수 없다.
따라서 테스트 명을 함수 기능에 부합하는 더 적절한 이름을 변경해야 한다.

test("반환값은 첫 번째 매개변수와 두 번째 매개변수를 더한 값이다", () => {
  expect(add(50,50)).toBe(100);
)

test("반환값의 상한은 '100'이다.", () => {
  expect(add(70,80)).toBe(100);
})

test 함수를 작성할 때 테스트 코드가 어떤 의도로 작성됐으며, 어떤 작업이 포함됐는지 테스트명으로 명확하게 표현해야다 한다.

에지 케이스와 예외 처리

모듈을 사용할 때 실수 등의 이유로 예상하지 못한 입력값을 보낼 때가 있다.
만약 모듈에 예외 처리를 했다면 예상하지 못한 입력값을 받았을 때 실행 중인 디버거로 문제를 빨리 발견할 수 있다.

타입스크립트로 입력값 제약 설정

타입스크립트를 사용한다면 함수의 매개변수에 타입을 붙여 다른 타입의 값이 할당되면 실행하기 전에 오류를 발생시킨다.

export function add(a:number, b: number) {
  const sum = a + b;
  if(sum > 100){
    return 100;
  }
  return sum
}

하지만 정적 타입을 붙이는 것만으로는 부족할 때가 있다.
예를 들어 특정 범위로 입력값을 제한하고 싶을 때는 런타임에 예외를 발생시키는 처리를 추가해야한다.

예외 발생시키기

ex: add 함수에 매개변수 a,b는 0에서 100까지 숫자만 받을 수 있다는 조건을 추가해보자.
타입만으로는 커버할 수 없다.

export function add(a:number, b: number) {
  if (a < 0 || a > 100) {
    throw new Error("0~100 사이의 값을 입력해주세요");
  }
  
  if (b < 0 || b > 100) {
    throw new Error("0~100 사이의 값을 입력해주세요");  
  }
  const sum = a + b;
  if(sum > 100){
    return 100;
  }
  return sum
}

// 잘못된 예외 검증 코드 작성법
expect(add(-10, 110)).toThrow();
// 올바른 작성법 - 화살표 함수를 사용하면 함수에서 예외가 발생하는지 검증할 수 있다.
expect(() => add(-10, 110)).toThrow();

오류 메시지를 활용한 세부 사항 검증

예외 처리용 매처인 toThrow에 인수를 할당하면 예외에 대해 더욱 상세한 내용을 검증할 수 있다.
Error 인스턴스를 생성하면서 메시지를 인수로 할당

test("인수가 '0~100'의 범위 밖이면 예외가 발생한다", () => {
  expect(() => add(110, -10)).toThrow('0~100 사이의 값을 입력해주세요");
})

의도적으로 예외를 발생시키기도 하지만 의도치 않은 버그가 생겨서 발생할 때도 있다.
의도했는지 아닌지 구분하기 위해 '의도한 대로 예외가 발생하고 있는가'라는 관점으로 접근하자.

instanceof 연산자를 활용한 세부 사항 검증

Error 클래스를 더욱 구체적인 상황에 맞춰 작성해보자.
- 설계의 폭을 넓힐 수 있다.
Error 클래스를 상속받은 두 개의 클래스 HttpError, RangeError 로 생성된 인스턴스는 instanceof 연산자를 사용해서 다른 인스턴스와 구분할 수 있다.

export class HttpError extends Error {}
export class RangeError extends Error {}

if (err instanceof HttpError) {
  // 발생한 오류가 HttpError인 경우
}
if (err instanceof RangeError) { 
 // 발생한 오류가 RangeError인 경우
}

상속받은 클래스들을 활용해 입력값을 체크하는 함수를 작성해보자.

function checkRange(value: number) {
  if (value < 0 || value > 100) {
    throw new RangeError('0~100 사이의 값을 입력해주세요');
  }
}

기존 add 함수에서 a,b를 검증해서 예외를 발생시키는 부분을 checkRange 함수 한곳에서 처리할 수 있어서 더 좋은 코드가 된다.

export function add(a: number, b: number) {
  checkRange(a);
  checkRange(b);
  const sum = a + b;
  if(sum > 100){
    return 100;
  }
  return sum
}

toThrow 매처의 인수에는 메시지뿐만아니라 클래스도 할당이 가능하다.
예외가 특정 클래스의 인스턴스인지 검증할 수 있다.

// 발생한 예외가 RangeError이므로 실패
expect(() => add(110,-10)).toThrow(HttpError);
// 발생한 예외가 RangeError이므로 성공
expect(() => add(110, -10)).toThrow(RangeError);
// 발생한 예외가 Error를 상속받은 클래스이므로 성공 - Error를 상속받은 클래스이므로 테스트 성공함 (주의)
expect(() => add(110, -10)).toThrow(Error);

용도별 매처

단언문은 테스트 대상이 기댓값과 일치하는지 매처로 검증한다.

진릿값 검증

toBeTruthy 는 참인값과 일치하는 매처
- toBeFalsy 는 거짓인값과 일치하는 매처
각 매처 앞에 not 을 추가하면 진릿값을 반전시킬 수 있다.

test("참인 진릿값 검증" () => {
  expect(1).toBeTruthy();
  expect(false).not.toBeTruthy();
})

test("거짓인 진릿값 검증" () => {
  expect(0).toBeFalsy();
  expect(true).not.toBeFalsy();
})

null 이나 undefined 도 toBeFalsy 와 일치한다.
하지만 null 인지 undefined 인지 검증하고 싶을 떄는 toBeNull 이나 toBeUndefined 를 사용

수치 검증

등가 비교나 대소 비교 관련 매처를 사용
toBe, toEqual, toBeGreaterThan, toBeLessThen
자바스크립트는 소수 계산에 오차가 있다.
- 10진수인 소수를 2진수로 변환할 때 발생
- 소수를 정확하게 계산해주는 라이브러리를 사용하지 않고 계산한 소숫값을 검증할때는 toBeCloseTo 매처를 사용한다.
- 두 번째 인수로 몇 자릿수까지 비교할것인지 지정 가능

test("소수 계산은 정확하지 않다.", () => {
  expect(0.1 + 0.2).not.toBe(0.3);
})
test("소수 계산 시 지정한 자릿수까지 비교한다.", () => {
  expect(0.1 + 0.2).toBeCloseTo(0.3); // 두번 째 인수의 기본값은 2
  expect(0.1 + 0.2).toBeCloseTo(0.3, 15);
  expect(0.1 + 0.2).not.toBeCloseTo(0.3, 16);
})

문자열 검증

등가 비교 혹은 문자열 일부가 일치하는지 검증하는 toContain
정규표현식을 검증하는 toMatch 같은 매처를 사용
문자열 길이는 toHaveLength로 검증

const str = "Hello World';
test("검증값이 기댓값과 일치한다", () => {
  expect(str).toBe("Hello World");
  expect(str).toEqual("Hello World");
})
test("toContain", () => {
  expect(str).toContain("World");
  expect(str).not.toContain("Bye")
});
test("toMatch", () => {
  expect(str).toMatch(/World/);
  expect(str).not.toMatch(/Bye/);
})
test("toHaveLength", () => {
  expect(str).toHaveLength(11);
  expect(str).not.toHaveLength(12);
})

stringContaining 이나 stringMatching 은 객체에 포함된 문자열을 검증할 때 사용한다.
검증할 객체의 프로퍼티중 기댓값으로 지정한 문자열의 일부가 포함됐으면 테스트가 성공한다.

const str = "Hello World";
const obj = { status: 200, message: str };
test("stringContaining", () => {
  expect(obj).toEqual({
    status: 200,
    message: expect.stringContaining("World");
  });
})

test("stringMatching", () => {
  expect(obj).toEqual({
    status: 200,
    message: expect.stringMatching(/World/),
  })
})

배열 검증

배열에 원시형인 특정값이 포함됐는지 확인하고 싶다면 toContain
배열 길이를 검증하고 싶을 때는 toHaveLength

const tags = ["jest", "storybook", "cypress"];
test("toContain", () => {
  expect(tags).toContain("Jest");
  expect(tags).toHaveLength(3);
});

배열에 특정 객체가 포함됐는지 확인할 때는 toContainEqual
arrayContaining 을 사용하면 인수로 넘겨준 배열의 요소들이 전부 포함돼 있어야 테스트가 성공한다.
두 매처 모두 등가 비교

test("toContainEqual", () => {
  expect(articles).toContainEqual(article1);
})
test("arrayContaining", () => {
  expect(articles).toEqual(expect.arrayContaining([article1, article3]));
})

객체 검증

객체 검증은 toMatchObject 를 사용
부분적으로 프로퍼티가 일치하면 테스트를 성공시키고 일치하지 않는 프로퍼티가 있으면 테스트 실패
객체의 특정 프로퍼티가 있는지 검증할때는 toHaveProperty 를 사용

const author = { name: "taroyamada", age: 38 };
test("toMatchObject", () => {
  expect(author).toMatchObject({ name: 'taroymada", age: 38 });
  expect(author).toMatchObject({ name: 'taroymada' }); // 부분적으로 일치
  expect(author).not.toMatchObject({ gender: 'man' }); // 일치하지 않는 프로퍼티가 있다.
})
test('toHaveProperty', () => {
  expect(author).toHaveProperty("name");
  expect(author).not.toHaveProperty("gender");
})

objectContaining 은 객체 내부 또는 다른 객체를 검증할 떄 사용함
테스트 대상의 프로퍼티가 기댓값인 객체와 부분적으로 일치하면 테스트 성공

const article = {
  title: "Testing with jest",
  author: { name: "taroyamada", age: 38 }
}
test("objectContaining", () => {
  expect(article).toEqual({
    title: "Testing with jest",
    author: expect.objectContaining({name: "taroyamda" })
  })
})

비동기 처리 테스트

자바스크립트 프로그래밍에서 비동기 처리는 필수 요소이다.
외부 API에서 데이터를 취득하거나 파일을 읽는 등 온갖 작업에서 비동기 처리가 필요하다.

export function wait(duration: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(duration);
    }, duration)
  })
}

Promise를 반환하는 방법

Promise 를 반환하면서 then 에 전달할 함수에 단언문을 작성하는 방법
wait 함수를 실행하면 Promise 인스턴스가 생성된다.
해당 인스턴스를 테스트 함수의 반환값으로 리턴하면 Promise 가 처리 중인 작업이 완료될 떄까지 테스트 판정을 유예한다.

test("지정 시간을 기다린 뒤 경과 시간과 함께 resolve 된다", () => {
  return wait(50).then((duration) => {
    expect(duration).toBe(50)
  })
})

두 번째 방법은 resolve 매처를 사용하는 단언문을 리턴하는 것
wait 함수가 resolve 됐을 때의 값을 검증하고 싶다면 첫번째 방법보다 간편하다.

test("지정 시간을 기다린 뒤 경과 시간과 함께 resolve된다", () => {
  return expect(wait(50)).resolves.toBe(50);
})

async/await을 활용한 방법

테스트 함수를 async 함수로 만들고 나서 함수 내에서 Promise가 완료될 때까지 기다리는 방법
resolves 매처를 사용하는 단언문도 await 로 대기시킬 수 있다.

test("지정 시간을 기다린 뒤 경과 시간과 함께 resolve 된다", async () => {
  await expect(wait(50)).resolves.toBe(50);
})

네 번째 방법은 검증값인 Promise가 완료되는 것을 기다린 뒤 단언문을 실행하는 것
가장 간단한 방법

test("지정 시간을 기다린 뒤 경과 시간과 함께 resolve 된다", async () => {
  expect(await wait(50)).toBe(50);
})

async/await 함수를 사용하면 비동기 처리가 포함된 단언문이 여럿일 때 한 개의 테스트 함수 내에서 정리할 수 있는 장점이있음

Reject 검증 테스트

반드시 reject 되는 코드의 함수를 사용해 reject 된 경우를 검증하는 테스트를 작성

export function timeout(duration: number) {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(duration);
    }, duration)
  })
}

// Promise를 리턴하는 방법 - catch 메서드에 전달할 함수에 단언문을 작성
test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", () => {
  return timeout(50).catch((duration) => {
    expect(duration).toBe(50);
  })
})

// rejects 매처를 사용하는 단언문 활용 - 단언문을 리턴하거나 async/await을 사용
test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", () => {
  return expect(timeout(50)).reject.toBe(50);
})

test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", async () => {
  await expect(timeout(50)).reject.toBe(50);
})

// try/catch 문을 사용하는 방법 Unhandled Rejection을 try 블록에서 발생시키고, 
// 발생한 오류를 catch 블록에서 받아 단언문으로 검증
test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", async () => {
  expect.assertions(1);  // 단언문이 한 번 실행되는 것을 기대하는 테스트가 된다.
  try {
    await timeout(50);
  } catch (err) {
    expect(err).toBe(50);
  }
})

테스트 결과가 기댓값과 일치하는지 확인

실수로 작성된 코드가 있을 때 실행하고 싶은 단언문에 도달하지 못한 채로 성공하며 종료된다.

test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", async () => {
  try {
    await wait(50); // timeout 함수를 사용할 생각이었지만 실수로 wait 함수를 사용함
    // 오류가 발생하지 않으므로 여기서 종료되면서 테스트는 성공
  } catch (err) {
    // 단언문은 실행되지 않음
    expect(err).toBe(50);
  }
})

이와 같은 실수를 하지 않으려면 테스트 함수 첫 줄에 expect.assertions를 호출해야 한다.
이 메서드는 실행되어야 하는 단언문의 횟수를 인수로 받아 기대한 횟수만큼 단언문이 호출됐는지를 검증한다.

test("지정 시간을 기다린뒤 경과 시간과 함께 reject 된다.", async () => {
  expect.assertions(1); // 단언문이 한 번 실행되는 것을 기대하는 테스트가 된다.
  try {
    await wait(50); 
    // 단언문이 한 번도 실행되지 않은채로 종료되므로 테스트는 실패
  } catch (err) {
    expect(err).toBe(50);
  }
})

비동기 처리 테스트를 할 때는 첫 번째 줄에 expect.assertions 을 추가하면 사소한 실수를 줄일 수 있다.
비동기 처리 테스트는 다양한 방식으로 작성할 수 있으니 자유롭게 선택하면 되지만 .resolves, .rejects 매처를 사용할 떄는 주의해야 한다.
테스트가 성공한것이 아니라 (*주의)단언문이 한 번도 평가되지 않고 종료될 때에도 테스트는 성공한다.

test("return하고 있지 않으므로 Promise가 완료되기 전에 테스트가 종료된다.", () => {
  // 실패할 것을 기대하고 작성한 단언문
  expect(wait(2000)).resolves.toBe(3000);
  // 올바르게 고치려면 다음 주석처럼 단언문을 return 해야 한다.
  // return expect(wait(2000)).resolves.toBe(3000);
})

비동기 처리를 테스트할 때 테스트 함수가 동기 함수라면 반드시 단언문을 return 해야 한다.
테스트에 따라서는 단언문을 여러 번 작성해야 할 때가 있는데 단언문을 여러번 작성하다 보면 return 하는 것을 잊기 쉽다.
이같은 실수를 하지 않으려면 비동기 처리가 포함된 테스트를 할때 다음 과 같은 규칙을 갖고 접근해야 한다.
- 비동기 처리가 포함된 부분을 테스트할 때 테스트 함수를 async 함수로 만든다.
- .resolves, .rejects 가 포함된 단언문은 await 한다.
- try-catch 문의 예외 발생을 검증할 때는 expect.assertions 를 사용한다.

Previous테스트 범위 NextMock

Last updated 5 months ago