Cypress clock 이용하는 소소한 테스트 팁

Jung Han
Jung-han
Published in
2 min readJan 20, 2019

어떤 것을 테스트 하려는가?

토스트 파일 최근 업로드 모습

토스트파일 > 최근 업로드 > 타임라인의 날짜(빨간 네모가 쳐져있는 부분)가 제대로 노출되는지 테스트하려고 한다.

타임라인 스펙

1. 오늘 업로드 된 경우 `오늘`
2. 어제 업로드 된 경우 `어제`
3. 2~4일 전 업로드 된 경우 `~일 전`
4. 그 이전인 경우 `0000.00.00.`

테스트를 돌리는 날짜가 매일 변할텐데 매일 픽스처를 바꿔 줄 것인가?ㅠㅠ

cy.clock() 이용하기

`cy.clock()을 통해 브라우저의 `Date` 객체, `setTimeout`, `clearTimeout`, `setInterval`, `clearInterval` 를 조작할 수 있다.

Syntax

Arguments

문제 해결하기

now 값을 주어 각 테스트 하는 시점을 조작하여 시점에 따라 제대로 노출 되는지 테스트 합니다.

그 외 example

argument 없이 사용

  • 사이트 방문 후 시간에 지난 후 동작을 테스트 하고 싶을 때

객체 override 하기

  • `setTimeout`, `clearTimeout` null로 override하기
  • Date 객체 override 하기

참고한 글

* https://docs.cypress.io/api/commands/clock.html

--

--

Jung Han
Jung-han

개인용 블로그로 사용하고 있습니다. 좋은 개발자가 꿈입니다. > https://www.notion.so/Han-Jung-c43f4bcd2b3f4b3d85b93aee41c5e098