Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[@cypress/react] React 17 support for support configuration

See original GitHub issue

Current behavior

I am adding cypress and @cypress/react to an existing project which uses React 17. It works as expected when using the using-babel-typescript template and changing '@babel/preset-react' so be ['@babel/preset-react': {runtime: 'automatic'}] to make use of React 17’s _jsx automatic import fanciness, which the project uses for all its components already. However, when I try and create a centralised cy.mount helper along the lines of:

import { mount } from '@cypress/react';
import { ReactElement } from 'react';
import Wrapper from '/path/to/Wrapper';

Cypress.Commands.add('mount', (component) => {
  return mount(<Wrapper>{component}</Wrapper>);
});

I get the following error in Cypress:

The following error originated from your application code, not from Cypress.

  > Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

After playing with various different scenarios this seems to be because support files are bundled separately without the custom plugin for bundling components, so it is referencing the usual “classic” react import instead of the new _jsx version.

Desired behavior

“@cypress/react” has a peerDependency on React 16, so I guess the ideal scenario is 1st class React 17 support and the ability to use runtime: 'automatic' for support bundling.