1월 3주차 기록

January 18, 2025 • ☕️ 3 min read

배워가기

테스트에서 setTimeout, setInterval, clearTimeout, clearInterval 등의 타이머를 동작시키기 위해 사용한다. 테스팅 프레임워크에서 실제 타이머를 대체할 가짜 타이머를 만드는 것이다.

Copy

beforeEach(() => {
  jest.useFakeTimers()
})

fake timer를 사용할 때 주의할 점이 있다.

바로 user-event와 함께 fake timer를 사용하면 테스트에서 timeout이 발생할 수 있다는 것이다. 이 이슈를 예방하기 위해 advanceTimers를 사용해야 한다.

Copy

const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime})

Ref

아주 가끔 요청사항으로 들어오는 position: sticky.

검색하면 나오는 기본 예제 코드들은 너무나 쉽게 동작하는 것 같지만,

이미 이것저것 덕지덕지 붙어버린 DOM 코드에는 참 적용이 쉽지 않다!

부모 요소에 height가 있어야 한다. (100% 등의 상대 단위는 안됨)
sticky 요소에 top, right, bottom, left 중에 하나 이상의 값이 있어야 함
부모 요소의 overflow 값이 hidden이면 안 된다.
- 그런데 어디서는 scroll, auto도 안 된다고 한다! (visible일 때만 된다고 함)
- 내 케이스에서는 auto로 설정했을 때 동작했다 🫠