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

Question

강의의 예시와 같이 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) }) 로 수정이 되어야 하지 않을까.. 조심스레 제안드려봅니다 ㅎ

코드 조커, 오프 · Answer

안녕하세요! 우선 말씀하신 부분이 정확히 맞습니다. 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 위 브랜치에서 수정이 되었으며, 강의 노트에도 기록해 둘 예정입니다. 덕분에 많은 분들이 혼란을 겪지 않으실 수 있을 것 같습니다. 제보 감사합니다. 😃