v10.4.0 Component test React 18 warnings with mid sized apps

Current behavior

In a simple repo, like a fresh CRA, or small a-la-carte components as in 330+ cypress-react-component-test-examples v10.4.0 works as intented; there are no React 18 warnings in the console.

In mid sized or larger apps the React 18 console warnings may still persist.

Here are 2 apps where the issue is observed. Install and run any component test and view the console.

Repo 1: Kent Dodds’ Epic React final app, with Cypress e2e and component tests:

git clone https://github.com/muratkeremozcan/bookshelf.git
cd bookshelf
npm i
npm run cy:open-ct

Repo 2: React Hooks in Action book with Cypress e2e and component tests

git clone https://github.com/muratkeremozcan/react-hooks-in-action-with-cypress.git
cd react-hooks-in-action-with-cypress
yarn 
yarn cy:open-ct

clear Cypress cache, remove node_modules, clear npm / yarn cache to ensure clean installs

Desired behavior

Regardless of the app size, there are no React 18 console warnings and we can use new React hooks in the tests.

Test code to reproduce

Linked above.

Cypress Version

10.4.0

Other

No response

[lmiller1990]

Headless (well “run mode” where you run all specs) execution for Component Testing will improve significantly (up to ~50% on large code bases, improvement linear based on # of specs) with an experimental flag that is landing soon.

FYI: You can also pass --headed to do a full execution with a headed browser (does not change performance).

As for the experimental feature:

• Pull Request: https://github.com/cypress-io/cypress/pull/23104
• Issue with context: https://github.com/cypress-io/cypress/issues/22353

I will try the experimental flag on your code base now. You can even try it by installing one of these pre-release binaries: https://github.com/cypress-io/cypress/commit/293a0f489bbbeae9ecc6d76053fa24eef77fc2de#comments. You need to enable the experiment. Example.

Edit: wow this code base is taking forever to run! I’ll get you some before/after numbers with the experimental flag. Give me a moment.

export default defineConfig({
  component: {
    experimentalSingleTabRunMode: true // <= this is the flag to enable the single tab run mode
  }
})

React 18 should be 💯 once the bug fix it out.

[lmiller1990]

Hmm that’s odd, I wonder why the CDP real-events are failing 🤔

Glad the experiment is helping - if it goes well over the next few weeks and no-one reports any bugs, it may become the default. Just to clarify - are you saying the real-events library is more flaky when using the single tab experiment?