Vitest기준으로 작성하겠지만, Jest도 동일합니다.

테스트 설명

먼저 cleanNumbers() 라는 함수를 테스트 한다고 가정하겠습니다.

cleanNumbers() 함수는 문자열로된 숫자들의 배열을 전달 받으면, 숫자 배열의 모든 요소들을 숫자 타입으로 변환하여 반환해주는 함수 입니다.

예를 들어)

['10','20','30'] 이라는 배열을 받으면 [10,20,30]으로 반환해주는 함수입니다.

테스트 코드

describe("cleanNumbers()", () => {
  it("문자열인 숫자가 있는 배열을 전달 받았을때, 숫자 타입의 배열로 반환한다.", () => {
    const numberValues = ["10", "20", "30"];

    const cleanedNumbers = cleanNumbers(numberValues);

    expect(cleanedNumbers).toBe([10, 20, 30]);
  });
});

문제점 발생

위 테스트 에서 저는 toBe()를 사용했습니다. 테스트의 설명 처럼 문자열로 이루어진 숫자 배열을 받아 숫자타입의 배열이 되기를 기대했는데,

?? 뭔가 이상합니다. 같은 배열인것 같은데 테스트는 실패라고 하네요.

원인은 자바스크립트의 객체

간단하게 말씀드리자면 자바스크립트에서 배열은 객체이고,
객체는 참조 값을 가지고 있습니다.

두 배열이 같은지를 비교하기 위해서는, 단순히 값을 비교하는게 아니라 참조값을 비교를 해야합니다. toBe() 메서드가 두 배열을 비교를 하면서 계속해서 참조값을 비교하여 테스트가 실패했던 것 입니다.

하지만 Vitest와 Jest에서는 값만 비교해주는 메서드를 제공해주는데,
그것이 바로 toEqual() 입니다.

요약

객체의 값을 비교하고 싶다면 toEqual()메서드를 사용하자