fix(tests): Remove unreliable timeout logic from development-runtime (#16454)

* Remove timeout logic from development-runtime

* Reduce timeout and add logging to waitForAPI

* Fix package.json scripts and remove timeout from static-query.js

* Remove timeout from compilation-hash.js

Author: vtenfys

e2e-tests/development-runtime/cypress/integration/hot-reloading/static-queries.js

@@ -1,7 +1,7 @@
 const author = `@gatsbyjs`
 
 beforeEach(() => {
-  cy.visit(`/static-query/`).waitForAPIorTimeout(`onRouteUpdate`)
+  cy.visit(`/static-query/`).waitForRouteChange()
 })
 
 describe(`hot-reloading static queries`, () => {

e2e-tests/production-runtime/cypress/integration/compilation-hash.js

@@ -44,11 +44,11 @@ describe(`Webpack Compilation Hash tests`, () => {
       // Simulate a new webpack build
       cy.task(`overwriteWebpackCompilationHash`, mockHash).then(() => {
         cy.getTestElement(`compilation-hash`).click()
-        cy.waitForAPIorTimeout(`onRouteUpdate`, { timeout: 3000 })
+        cy.waitForRouteChange()
 
         // Navigate into a non-prefetched page
         cy.getTestElement(`deep-link-page`).click()
-        cy.waitForAPIorTimeout(`onRouteUpdate`, { timeout: 3000 })
+        cy.waitForRouteChange()
 
         // If the window compilation hash has changed, we know the
         // page was refreshed

e2e-tests/production-runtime/cypress/integration/static-query.js

@@ -1,5 +1,5 @@
 beforeEach(() => {
-  cy.visit(`/static-query/`).waitForAPIorTimeout(`onRouteUpdate`)
+  cy.visit(`/static-query/`).waitForRouteChange()
 })
 
 describe(`StaticQuery behavior`, () => {

e2e-tests/production-runtime/package.json

@@ -21,13 +21,13 @@
   "license": "MIT",
   "scripts": {
     "build": "CYPRESS_SUPPORT=y gatsby build",
-    "build:offline": "TEST_PLUGIN_OFFLINE=y gatsby build",
+    "build:offline": "TEST_PLUGIN_OFFLINE=y CYPRESS_SUPPORT=y gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
     "serve": "gatsby serve",
     "start": "npm run develop",
-    "test": "CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test && npm run test-env-vars",
-    "test:offline": "CYPRESS_SUPPORT=y npm run build:offline && yarn start-server-and-test:offline && npm run test-env-vars",
+    "test": "npm run build && npm run start-server-and-test && npm run test-env-vars",
+    "test:offline": "npm run build:offline && yarn start-server-and-test:offline && npm run test-env-vars",
     "test-env-vars": " node __tests__/env-vars.js",
     "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
     "start-server-and-test:offline": "start-server-and-test serve http://localhost:9000 cy:run:offline",

packages/gatsby-cypress/src/commands.js

@@ -6,13 +6,18 @@ Cypress.Commands.add(`getTestElement`, (selector, options = {}) =>
   cy.get(`[data-testid="${selector}"]`, options)
 )
 
-const TIMEOUT = 9999
+const TIMEOUT = 5000
 
 Cypress.Commands.add(
   `waitForAPI`,
   { prevSubject: `optional` },
   (subject, api, { timeout = TIMEOUT } = {}) => {
-    cy.window().then({ timeout: timeout }, win => {
+    Cypress.log({
+      name: `waitForAPI`,
+      message: api,
+    })
+
+    cy.window({ log: false }).then({ timeout: timeout }, win => {
       if (!win.___apiHandler) {
         win.___apiHandler = apiHandler.bind(win)
       }