The React18 support in Component Testing doesn't work

[joshwooding]

Current behavior

Currently when running a CT using the new entry "cypress/react18" I get the following error:

Which is thrown from

cypress/npm/react/src/createMount.ts

Line 172 in c058bf2

lastMountedReactDom.unmountComponentAtNode(el)

because the lastMountedReactDom is react-dom/client which only exports createRoot and hydrateRoot (https://github.com/facebook/react/blob/9fcaf88d58cfd942e2fdd303ae8291dbf4828969/packages/react-dom/client.js#L25)

Desired behavior

No response

Test code to reproduce

I can't provide a reproduction at the moment but will provide one soon. Using the react18 entry in a CT suite should cause it immediately.
https://github.com/joshwooding/cypress-react18-repro

Cypress Version

10.4.0

Other

No response

[joshwooding]

Just an update you need two tests in the spec to encounter the error. I've added the reproduction above @rockindahizzy.

[rockindahizzy]

Just an update you need two tests in the spec to encounter the error. I've added the reproduction above @rockindahizzy.

Thanks for the reproduction, @joshwooding!

[lmiller1990]

Uh oh, I guess we forgot pass through the React 18 specific unmount:

cypress/npm/react18/src/index.ts

Lines 31 to 41 in c058bf2

	export function unmount (options: UnmountArgs = { log: true }) {
	const internalOptions: InternalUnmountOptionsReact18 = {
	// type is ReturnType<typeof ReactDOM.createRoot>
	unmount: (): boolean => {
	root.unmount()
	return true
	},
	}
	return makeUnmountFn(options, internalOptions)

The main test suite (which is huge) only runs against cypress/react right now, the smaller one for React 18 is not doing two mount in a single test: https://github.com/cypress-io/cypress/tree/develop/system-tests/project-fixtures/react/src

Big oversight, let's fix this and ship a patch in the next release. This makes react18 basically useless as-is - we haven't actually documented it yet, so I'm not sure if we can push our a mid sprint release, but maybe we can - let's see how it goes.

[dartess]

Hey, for some reason I couldn't find this issue through a github search. It was only by chance that I was able to find it with my eyes. Maybe this comment will help the following seekers:

TypeError: lastMountedReactDom.unmountComponentAtNode is not a function

[lmiller1990]

PR is here to fix it: https://github.com/cypress-io/cypress/pull/23204/files

[cypress-bot]

The code for this is done in cypress-io/cypress#23204, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.5.0, please open a new issue.