React 18 DESTROYS 25+5 Clock tests! Front End Development Libraries Projects - Build a 25 5 Clock

TL;DR
You should use ReactDOM.render instead of ReactDOM.createRoot in order to pass the tests for the 25 + 5 Clock.

Sorry for the clickbait title - I couldn’t help it.

Tell us what’s happening:
Using the latest version of React (18) seems to break the FCC tests for this project. This only happens if you use the new ReactDOM.createRoot entry point, which is recommended by React in their documentation. This took me two days to figure out, so I wanted to bring it up in case anyone else has the same issues.

The tests seem to be checking the DOM before react 18’s setState method actually gets around to updating it.

This tends to breaks test 8 (because spamming the increment button can behave a little differently in React 18), and a bunch of the Timer tests.

Your code so far
My code, https://codepen.io/anlach/pen/PoRzLeQ (I’m only allowed two links), is fine once I switched back to the old React 17 API, and I will proceed with the older version of the API - calling ReactDOM.render directly. I still have some styling updates to do.

I have forked the original codepen by Peter Weinberg, updated React, and called ReactDOM.createRoot here. This shows how the tests break for the example that FCC provides, once you switch to the React 18 API. Maybe someone more familiar with the tests can use this to get them functioning for the latest React?

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock

Link to the challenge:

Heya!

This is a known issue - React 18 includes some breaking changes.

We’ve got an open issue thread to track this: Challenges (Front End Development Libraries Projects): Multiple tests breaks with React 18 · Issue #45922 · freeCodeCamp/freeCodeCamp · GitHub

Okay, thanks for the github link. It sounds like this project is the last holdout. Maybe I’ll try to fix the tests…