프론트엔드 테스트 - (5) toBe() vs toEqual() vs toBeTruthy()

 

test("if checkbox is not checekd, submit button disabled", async () => {
  render(<Page />);

  const checkBoxElement = screen.getByRole("checkbox", {
    name: /checkbox/i,
  });
  const submitButtonElement = screen.getByRole("button", {
    name: /submit/i,
  });

  expect(checkBoxElement.checked).toEqual(false);
  expect(submitButtonElement.disabled).toBeTruthy();
});

 

위의 예시로 보자면,  toEqual( )과 toBeTruthy( )를 구분해서 사용한 이유는 각 matcher의 역할이 서로 달라서 이다.

 

1. 체크박스 상태 검증

checkBoxElement.checked의 경우,

값이 boolean이다. 즉, 비교값 자체가 true, false가 되어야 한다.

따라서 toEqual() matcher를 사용하여, checked 값이 false(비교값)과 동일한지를 검증한다.

2. 버튼 활성화 상태 검증

submitButtonElement.disabled의 경우, 버튼이 비활성화된 상태인지 검증해야 된다. 

 

버튼이 비활성화된 상태는 disabled 속성이 true일 경우다.

toBeTruthy() matcher는 값이 참(true)인지 검증하는 데 사용할 수 있기 때문에 이 상황에 적합하다.

만약 toEqual(true)를 사용하면 다음과 같은 문제가 발생할 수 있다.
- disabled 속성이 문자열 "true"로 설정된 경우 테스트가 실패한다.
- disabled 속성이 존재하지 않더라도 테스트가 통과한다.

 

버튼의 disabled의 경우 "true/false" 가 문자열로 반환 될 수 있어서,
가장 적절한 방법은 toBe()를 사용해서 타입까지 비교하는 것이 안전한다.

 

 

 

const button = { text: 'Click me' };

// toEqual()은 객체의 구조까지 비교합니다.
expect(button).toEqual({ text: 'Click me' });

// toBeTruthy()는 값이 참인지만 구조는 고려하지 않습니다.
expect(button.text).toBeTruthy();

 

어디서는 toEqual( ) 을 쓰고, 어디서는 toBeTruthy( )를 쓴다.

무슨 차이 인거지..?

 

궁금해서 찾아봤다.

 

• toBe()
  • 값이 참(true)인지 검증
  • 값과 타입 비교 → 엄격한 비교를 수행
  • 객체 구조(인터페이스)까지 비교 → 깊은 비교
    • 두 객체가 동일한 속성과 값을 가지고 있더라도, 서로 다른 메모리 주소를 가리키면 같지 않다고 판단
  • 예시 :

expect(2 + 2).toBe(4); // 성공
expect({}).toBe({}); // 실패 (객체는 서로 다른 참조를 가지고 있음)

 

 

• toEqual():
  • 두 값이 동일한지 검증
  • 값뿐만 아니라 객체의 구조(인터페이스)까지 비교
  • 주로 객체나 배열 비교에서 사용
  • 예시:

expect({ name: 'John' }).toEqual({ name: 'John' }); // 성공 (객체 내용이 같으므로)

 

 

• toBeTruthy()
  • 값이 참(true)인지 검증
  • 값만 비교, 구조(인터페이스)는 고려하지 않음
  • 주로 boolean값 비교에서 사용
  • Javascript에서 false, 0, NaN, "", undefined, null 을 제외한 모든 값은 truthy 값으로 간주된다.
  • 예시:

expect(1).toBeTruthy(); // 성공 (1은 truthy 값)
expect(0).not.toBeTruthy(); // 성공 (0은 truthy가 아님)

 

 

👉 엄격한 비교 순 : toBe( ) > toEqual( ) > toBeTruthy( )

 

 

 

 

 

 

 

 

* 참고
https://testing-library.com/docs/react-testing-library/api

 

 

 

 

 

 

 

 

프론트엔드 테스트 - (4) RTL - 쿼리 우선 순위, userEvent