해결된 질문
작성
·
420
·
수정됨
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
위 브랜치에서 수정이 되었으며, 강의 노트에도 기록해 둘 예정입니다.
덕분에 많은 분들이 혼란을 겪지 않으실 수 있을 것 같습니다. 제보 감사합니다. 😃
넵 링크주신 부분에서 확인했습니다, 답변 감사합니다!