Gatsby: [Cypress] cy.clock() causes unexpected behavior when timeout function has passed

[takuyahara]

Description

I'm using Gatsby with Cypress and trying to use cy.clock(). When certain function name has passed it causes unexpected and different behavior in development and production environment. Since the issue doesn't reproduce on React project it may Gatsby related.

Steps to reproduce

Clone this repository and run npm run test:e2e:dev for dev environment and test:e2e:prod for prod environment.

Expected result

dev
Test passes.

prod
Test passes.

Actual result

dev
Test fails or behave unexpectedly when setTimeout or clearTimeout has passed to cy.clock().

Case 1
Test fails; page will not be rendered.

  beforeEach(() => {
    cy.clock(Date.now(), [
      `setInterval`,
      `clearInterval`,
      `setTimeout`
      // `clearTimeout`
    ]);
    cy.visit(`http://localhost:8000`)
  })

Case 2
Test passes but when running test via npm run cy:open it says that HMR fails.

  beforeEach(() => {
    cy.clock(Date.now(), [
      `setInterval`,
      `clearInterval`,
      // `setTimeout`,
      `clearTimeout`,
    ]);
    cy.visit(`http://localhost:8000`)
  })

Case 3
Test fails; same as Case 1, page will not be rendered.

  beforeEach(() => {
    cy.clock(Date.now(), [
      `setInterval`,
      `clearInterval`,
      `setTimeout`,
      `clearTimeout`,
    ]);
    cy.visit(`http://localhost:8000`)
  })

prod
Test passes but when running test via npm run cy:open I see low resolution image which never turns sharp. Issue rests even I use cy.tick(). Maybe setTimeout() is used to load sharp images?

  beforeEach(() => {
    cy.clock(Date.now(), [
      `setInterval`,
      `clearInterval`,
      `setTimeout`,
      `clearTimeout`, // this doesn't affect
    ]);
    cy.visit(`http://localhost:8000`)
  })

Environment

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.1.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.13.0 - ~/.yarn/bin/yarn
    npm: 6.8.0 - ~/.nodebrew/current/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 73.0.3683.75
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    cypress: ^3.2.0
    gatsby: ^2.1.31 => 2.1.31 
    gatsby-image: ^2.0.33 => 2.0.33 
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-react-helmet: ^3.0.9 => 3.0.9 
    gatsby-plugin-sharp: ^2.0.28 => 2.0.28 
    gatsby-source-filesystem: ^2.0.24 => 2.0.24 
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17 
  npmGlobalPackages:
    gatsby-cli: 2.4.11

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[takuyahara]

Let me keep this opened until I get response from somebody.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[sgnl]

I am experiencing this as well.

If I use Cypress' cy.clock() the page will not render at all (white page; no DOM elements from project)

When I remove it, the page renders properly.

my cypress version is: cypress: 3.6.0

[sgnl]

Cypress cy.clock() Documentation: https://docs.cypress.io/api/commands/clock.html#Syntax

Gatsby's redux (and probably other packages) use timer methods like setInterval internally so when I use cy.clock() without any arguments it will stub a lot of timer methods such as setInterval and setTimeout.

In my test case, luckily, I only needed to stub the methods on the Date object and I was able to do so like this cy.clock(new Date(), ['Date']).

Doing so my page rendered properly and I was able to continue writing my tests.

BIG CAVEAT if I we using setInterval in my tests, I would still be stuck.

[bgk17]

Did you ever figure this out?

[ghost]

Still an issue here...