React 18 support

[AudunWA]

This library doesn't work with React 18. I don't have a lot of knowledge about React's inner workings nor this library's, but this line might be of help? https://github.com/facebook/react/blob/a724a3b578dce77d427bef313102a4d0e978d9b4/packages/react-dom/src/client/ReactDOMComponentTree.js#L63

The root element that I use for React 18 gets a __reactContainer$<random string> property:

[Dmitry-Ostashev]

The testcafe-react-selectors library was not fully tested with React 18, so we cannot say that it supports the latest React version. We will work on it. Please stay tuned.

[kirovboris]

I checked React Selectors with our test cases and they work as intended with React 18.

Did you use React Selectors with another react version before?

Could you please share your application and test or create a minimal working example to reproduce this behavior?

Also, please specify a testcafe version, browser, and NodeJS version.

[AudunWA]

I've tested a bit more, and it seems that testcafe-react-selectors works fine when the code uses ReactDOM.render, which is unsupported in React 18 and should be replaced with createRoot. See https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis for more information.

Example from the React 18 upgrade guide:

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

We'll use the old API for our e2e test as a workaround, but at some point it will be removed from React. Additionally, by using the old API, the e2e tests won't use any of the new features introduced in React 18.

[AndreyBelym]

Thank you for sharing your research. @kirovboris is currently busy, but he will take a look at this issue when he gets more free time.

[kirovboris]

Thank you, I've reproduced the issue.

[kirovboris]

Implemented in testcafe-react-selectors@5.0.1.