Breaks with Next.js 10

[jorisw]

Hi,

We're using cypress-react-selector with a Next.js 10 project. While our tests ran fine with Next.js 9.5.3, after upgrading Next.js to 10, something is causing cypress-react-selector to stop finding React components at some seemlingly random point.

Some example code:

/// <reference path="./../../support/index.d.ts" />

describe('Click through on boarding flow', () => {
  before(() => {
    cy.visit(`${Cypress.config().baseUrl}`)
  })
  it('should walk through all of the screens in the on boarding flow', () => {
    cy.fixture('users').then(users => {
      cy.login(users.test.email)
        .react('Panel')
        .should('contain', users.test.email)
        .visit(
          `${Cypress.config().baseUrl}/enter-code?code=${Cypress.env(
            'E2E_TEST_MFA_CODE',
          )}`,
        )
        .waitForReact()
      cy.react('Panel').should('exist')
      cy.react('Link').last().click()
      cy.react('Step').react('Button').last().click()
      // ... (truncated)
  })
})

cypress-react-selector for some reason fails to see the Step component, where under Next.js 9.5.3 it would see it just fine. The problem does not seem to be specific to the Step component, for in another branch with a slightly different test sequence, it fails on a different component.

I'd be happy to paste any logs that might help diagnose the problem. For starters here's Cypress' output:

14 assert expected <div.css-1jqjf6a> to exist in the DOM
15 log Finding <Link>
16 last
17 click
(new url)
http://localhost:5000/signup/some-feasture/some-page
18 task readResqFile
19 log [cypress-react-selector] loaded
20 log Finding <Step>
21 then function(){}
Error
Component not found <Step>

  There can be multiple reasons for it.
  > Check the root is defined as a env parameter (cypress.json config file).
  > If the root is defined correctly, check other parameters - component name, props and state objects

  Or, raise an issue with proper code samples here: https://github.com/abhinaba-ghosh/cypress-react-selector/issues
node_modules/cypress-react-selector/src/reactHandler.js:202:1
  200 |           if (!value) {
  201 |             if (retries < 1) {
> 202 |               throw new Error(
      | ^
  203 |                 getComponentNotFoundMessage(
  204 |                   component,
  205 |                   reactOpts.props, 
 at eval (webpack:node_modules/cypress-react-selector/src/reactHandler.js:202:1)
From previous event:
    at getRet (http://localhost:5000/__cypress/runner/cypress_runner.js:155117:21)
From previous event:
    at Context.thenFn (http://localhost:5000/__cypress/runner/cypress_runner.js:155135:24)
    at Context.then (http://localhost:5000/__cypress/runner/cypress_runner.js:155574:22)
    at Context.<anonymous> (http://localhost:5000/__cypress/runner/cypress_runner.js:170040:22)
    at <unknown> (http://localhost:5000/__cypress/runner/cypress_runner.js:169464:16)
From previous event:
    at runCommand (http://localhost:5000/__cypress/runner/cypress_runner.js:169443:9)
    at next (http://localhost:5000/__cypress/runner/cypress_runner.js:169589:15)
    at <unknown> (http://localhost:5000/__cypress/runner/cypress_runner.js:169617:17)

Relevant package versions:

Our test suite:

    "cypress": "^5.6.0",
    "cypress-react-selector": "^2.2.1",
    "resq": "^1.10.0",

Our app:

    "next": "^10.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",

cypress.json:

{
  "baseUrl": "http://localhost:5000",
  "fixturesFolder": "./cypress/fixtures",
  "integrationFolder": "./cypress/integration/tests",
  "projectId": "xxx"
}

[jorisw]

Closing this because I'm no longer sure it's related to Next.js