• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

2.4장 마지막 border 스타일 검증 시 질문

24.01.08 02:02 작성 24.01.08 10:43 수정 조회수 279

3

강의의 예시와 같이

expect(textInput).toHaveStyle({
  borderWidth: 2,
  borderColor: rgb(25, 118, 210)
})

으로 할 경우 정상적으로 test passed가 되긴 하는데,

expect(textInput).toHaveStyle({
  borderWidth: 1,
  borderColor: rgb(25, 118, 210)
})

처럼 변경할 경우에도 test passed가 되네요.

 

testing-library/jest-dom#toHaveStyle 이나 비슷한 다른 이슈를 좀 확인해보니, 예시처럼이 아닌

expect(textInput).toHaveStyle({
  borderWidth: '1px',
  borderColor: rgb(25, 118, 210)
})

처럼 세팅해야 예상한대로 fail이 되는 것 같습니다.

 

그래서 border style을 검증하는 쪽 테스트 코드의 expect 부분도

expect(textInput).toHaveStyle({
  borderWidth: '2px',
  borderColor: rgb(25, 118, 210)
})

로 수정이 되어야 하지 않을까.. 조심스레 제안드려봅니다 ㅎ

답변 1

답변을 작성해보세요.

0

안녕하세요!

우선 말씀하신 부분이 정확히 맞습니다.

https://github.com/testing-library/jest-dom/blob/main/src/to-have-style.js

결국 toHaveStyle 자체가 getComputedStyle와 style객체값을 가지고 와 비교하기 때문에 borderWidth의 반환값인 문자열 형태로 비교가 되어야 올바른 비교가 가능합니다.

해당 부분은
https://github.com/practical-fe-testing/test-example-shopping-mall/commit/dd27750e0805c9a7a09ead7b0a8d185e40cec638
위 브랜치에서 수정이 되었으며, 강의 노트에도 기록해 둘 예정입니다.

덕분에 많은 분들이 혼란을 겪지 않으실 수 있을 것 같습니다. 제보 감사합니다. 😃

leo.kang님의 프로필

leo.kang

질문자

2024.01.08

넵 링크주신 부분에서 확인했습니다, 답변 감사합니다!