[ jest ] toBe vs toEqual vs toStrictEqual 차이점

목차

• toBe
• toEqual
• toStrictEqual
• 차이점 요약

toBe

방식 : 엄격한 동일성 검사(strict equality)

• Object.is를 사용하여 검사
  • +0과 -0을 구분
  • NaN === NaN 은 false 지만 Object.is(NaN, NaN) 은 true

용도

• 원시 값(primitive value) 비교 - 숫자, 문자열, null, undefined 등
• 동일한 객체 참조 확인 - 객체나 배열이 같은 메모리 주소를 가리키는지 확인
• 배열의 요소들이 순서와 내용까지 동일한지 확인

특징 : 값이 같더라도 서로 다른 객체나 배열인 경우 실패

 

예시

 expect(10).toBe(10); // 통과
 expect('hello').toBe('hello'); // 통과

 const obj1 = { a: 1 };
 const obj2 = { a: 1 };
 expect(obj1).toBe(obj2); // 실패 (서로 다른 참조)
 
const obj3 = obj1;
expect(obj3).toBe(obj1) // 통과 (서로 같은 참조)

expect([1,2,3].toBe([1,3,2]) // 실패
expect([1,2,3].toBe([1,2,3]) // 성공

 

toEqual

방식: 깊은 비교 (Deep Equality)

• 객체나 배열의 구조와 내용을 비교
• 부모 클래스에서 상속된 속성은 무시

용도

• 객체나 배열의 구조와 내용을 비교할 때
• 부모 클래스에서 상속된 속성은 무시해도 괜찮을 때.

특징

• 참조를 무시하고 값만 비교
• 객체 내부에 중첩된 값도 비교

 

const obj1 = { a: 1 };
const obj2 = { a: 1 };
expect(obj1).toEqual(obj2); // 통과 (내용이 같음)

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
expect(array1).toEqual(array2); // 통과 (배열의 내용이 같음)

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
expect(obj1).toEqual(obj2); // 통과 (내용이 동일)

toStrictEqual

방식 : 객체의 구조(프로퍼티와 값) 그리고 타입(클래스 여부) 가 동일한지 비교 검사, 객체가 직접 소유한 프로퍼티만 비교

용도 

• 더 엄격한 객체 검증이 필요할 때
  • 객체의 키와 값이 같고, 구조가 완전히 동일한지 확인
  • 명시되지 않은 속성(undefined)까지 검사해야 할때
  • 단순히 {} 생성된 객체인지 클래스 인스턴스인지 비교가 필요한 경우
  • 배열의 요소들이 순서와 내용까지 동일한지 확인

특징

• 객체의 추가적인 프로퍼티나 순서의 차이도 확인
• 상속받은 프로퍼티도 비교 대상에서 제외
• 상속받은 프로퍼티를 포함하려면 객체를 복사하거나 평탄화(flatten)필요

 

예시

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
expect(obj1).toStrictEqual(obj2); // 통과 (내용 동일)

const obj3 = { a: 1, b: 2, c: 3 };
expect(obj1).toStrictEqual(obj3); // 실패 (추가된 프로퍼티 c)

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = [1, 3, 2];
expect(arr1).toStrictEqual(arr2); // 통과 (배열 내용 동일)
expect(arr1).toStrictEqual(arr3) // 실패


/* 상속 프로퍼티 */
// 부모 클래스 정의
class Parent {
  constructor() {
    this.parentProp = 'parent';
  }
}

// 자식 클래스 정의
class Child extends Parent {
  constructor() {
    super();
    this.childProp = 'child';
  }
}

const obj1 = new Child();
const obj2 = { childProp: 'child', parentProp: 'parent' };

// `toStrictEqual`은 obj1의 상속 프로퍼티(parentProp)를 비교하지 않음
expect(obj1).toStrictEqual(obj2); // 실패

// obj1의 모든 프로퍼티를 명시적으로 포함한 객체와 비교
const obj1Flattened = Object.assign({}, obj1);
expect(obj1Flattened).toStrictEqual(obj2); // 통과

 

* 평탄화 추가 설명

원래 obj1 객체 (상속 포함):

Child {
  childProp: 'child',
  __proto__: Parent {
    parentProp: 'parent',
    __proto__: Object
  }
}

 

Object.assign({}, obj1)로 평탄화한 객체

{
  childProp: 'child',
  parentProp: 'parent'
}

 

 

차이점 요약

	toBe	toEqual	toStrictEqual
비교 방식	Object.is를 사용하여 참조와 값을 비교	구조와 내용의 깊은 비교	- toEqual의 기능 + 더 엄격한 검증 - 객체의 타입(인스턴스 여부)까지 검증 - 스파스 요소까지 포함
원시 값 비교	값이 같으면 true	값이 같으면 true	값이 같으면 true
객체 비교	참조가 같아야 true	객체의 내용이 같으면 true	객체의 내용 + 타입이 같아야 true
배열 비교	참조가 같아야 true	배열의 내용과 순서가 같으면 true	배열의 내용, 순서, 스파스 요소가 같아야 true
클래스 인스턴스 비교	동일 참조일 때만 true	구조가 같으면 true	구조와 클래스 타입이 같아야 true
스파스 요소	비교하지 않음	스파스 요소와 undefined를 동일하게 간주	스파스 요소와 undefined를 다르게 간주
사용 사례	- 원시 값 비교 - 객체 참조 확인 - 동일한 메모리 위치인지 확인	- 객체의 구조나 내용을 검증할 때 - 배열, 객체의 내용 확인	- 객체의 구조와 타입까지 검증해야 할 때 - 배열의 스파스 요소 확인