waitForRouteChange() in gatsby-cypress does not work with cypress run command

Description

It seems as though the waitForRouteChange() command does not work in combination with the cypress run command. It works fine with cypress open, but not cypress run. When used with cypress run it results in a timeout error similar to the following:

CypressError: `cy.then()` timed out after waiting `10000ms`.

Your callback function returned a promise which never resolved.

The callback function was:

win => {
    if (!win.___apiHandler) {
      win.___apiHandler = _apiHandler.default.bind(win);
    }

    return _apiHandler.waitForAPI.call(win, api).then(() => subject);
  }

Steps to reproduce

1. Have a working Gatsby Site

2. Setup e2e tests in my Gatsby project with Cypress these instructions.

3. Install the gatsby-cypress, which adds additional commands such as waitForRouteChange().

4. Create a test that includes waitForRouteChange() so you have something like this:

context("About", () => {
  beforeEach(() => {
    cy.visit(`/about`)
    cy.waitForRouteChange()
  })

  it("has focusable buttons", () => {
    cy.findByText("click me").focus()
    cy.focused().should("have.text", "click me")
  })
})

1. Run the test like this and it should work.

npx cypress open --spec cypress/integration/about.spec.js

1. Run the test like this and it should fail.

npx cypress run --spec cypress/integration/about.spec.js

Expected result

Both tests fail gracefully and do not throw any exceptions.

Actual result

The cypress open command does not through any exceptions and the cypress run command does through exceptions.

Environment

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
    Yarn: 1.22.4 - /Volumes/Websites/www.test.com/node_modules/.bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    gatsby: ^2.21.8 => 2.21.8
    gatsby-background-image: ^1.1.1 => 1.1.1
    gatsby-cypress: ^0.4.0 => 0.4.0
    gatsby-image: ^2.4.0 => 2.4.0
    gatsby-plugin-google-analytics: ^2.3.0 => 2.3.0
    gatsby-plugin-manifest: ^2.4.1 => 2.4.1
    gatsby-plugin-offline: ^3.2.0 => 3.2.0
    gatsby-plugin-optimize-svgs: ^1.0.4 => 1.0.4
    gatsby-plugin-postcss: ^2.3.0 => 2.3.0
    gatsby-plugin-react-helmet: ^3.3.0 => 3.3.0
    gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5
    gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
    gatsby-plugin-sharp: ^2.6.0 => 2.6.0
    gatsby-plugin-sitemap: ^2.4.1 => 2.4.1
    gatsby-source-filesystem: ^2.3.0 => 2.3.0
    gatsby-source-sanity: ^5.0.6 => 5.0.6
    gatsby-transformer-sharp: ^2.5.0 => 2.5.0

[NeversSync]

@LekoArts I just hit this same error and I have the CYPRESS_SUPPORT ENV variable in use in my scripts as show in that link you provided. When I run the cypress test locally using cypress open no errors occur, but in my github actions CI tests, the waitForRouteChange error throws.

Screenshot of error: error-screenshot.pdf

Any insights or support would be greatly appreciated.

Package versions: gatsby: 4.21.0 @testing-library/cypress: 8.0.3 gatsby-cypress: 2.21.0 cypress: 10.6.0

Scripts:

"cy:open": "cypress open"
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'"
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open"
"test:e2e:ci": "cross-env WAIT_ON_TIMEOUT=600000 CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"

[sven5]

@LekoArts Thanks. you’re right. the import "gatsby-cypress/commands" was missing in e2e.js