freeCodeCamp: Challenges (Front End Development Libraries Projects): Multiple tests breaks with React 18
If you want to make sure your project is not failing because of React 18 start by using the old render method.
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
If that doesn’t help downgrade to React 17.
Using the flushSync function may also be an option, but that is more of a last-resort type fix.
If your project still fails with React 17 it is most likely not an issue with the tests but with your code. Open a thread on the forum and ask for help. Do not ask for help in this issue!
The test library has been archived it is no longer being developed. So there is no point in asking about it.
Code that is passing using React 17 is failing with React 18.
It seems to be an issue with the new batch rendering and our tests. At this time, I’m not sure what the best solution is. I haven’t really looked into it much.
Affected Page
-
JavaScript Calculator ✅ (the example project is passing but we may have to use a longer delay)
-
25 + 5 Clock ✅ (may still fail using React 18 and hooks)
-
Drum Machine ✅
Tests: https://github.com/freeCodeCamp/testable-projects-fcc/blob/main/src/project-tests/
Additional context
Forum threads:
https://forum.freecodecamp.org/t/drum-machine-test-7-is-failing/507800/ https://forum.freecodecamp.org/t/stuck-on-drum-machine-test-7/508120/ https://forum.freecodecamp.org/t/25-5-clock-pomodoro-timer-not-passing-test-12-decrease-break-time/504446/12 https://forum.freecodecamp.org/t/my-tests-don-t-make-sense-in-my-25-5-clock/504936
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 5
- Comments: 34 (25 by maintainers)
Links to this issue
Commits related to this issue
- fix: use deprecated rendering method As mentioned in https://github.com/freeCodeCamp/freeCodeCamp/issues/45922 — committed to lemredd/fcc-calculator by lemredd 10 months ago
Hey @mskDev0092, the team has been working hard on the curriculum update, which includes and frontend courses. This work will take a lot of time and effort, so please be patient 🙂
There is also a forum post on this topic with more details: https://forum.freecodecamp.org/t/the-react-course-is-seriously-out-of-date/624788.
Hey all,
I am unsure how we can change the tests to pass this.
The issue is React 18’s batching of the HTMLEvents. In order to pass, I had to use
ReactDOM.flushSyncaround the set state calls.So, if someone could help me figure out how to write tests preventing this batching, that would be excellent. Otherwise, we will just have to warn Campers to: a) Be aware of this when using React >=18 b) Downgrade to <= 17
Hi @lasjorg - I’m going to take a look at the tests for the 25 + 5 clock. I’ve been going through the curriculum, and it took me a while to figure out it was my use of React 18 that was causing the tests to fail. The best way to avoid this issue for others in the future is to fix the tests, so I’m going to give it a shot. It might take me a while.
Please let me know if there have been any developments in the last couple weeks, or if there’s anything else I should know.
Are there any plans to put a note or something for at least the 25+5 project regarding using React 17 vs. 18 when testing with the Test Suite? This issue keeps popping up on the forum every day. What is the status of fixing the tests to work with React 18?
@fygen This issue is not the correct place to ask for help with your project. Use the forum thread instead.
If you check the example project you can see it passes all the tests, as does my own project. So it isn’t an issue with the tests (with the correct version of React).
🤦♂️ Right. My bad.
Well, at least you are having fun, just don’t wake the neighbors 🥁
BTW, not sure what you mean by the events. I think the DOM updates are just slower because of the state batching, not by much, but just enough to where you can’t query the DOM instantly after a state update.
@lasjorg I started with the calculator, but am now mostly just playing with the Drum Machine
I can fix the drum machine and calculator just by adding some simple delays between button click and DOM queries but I’m not sure what is going on with the 25 + 5 Clock. I’m not really sure how React is breaking the timer, it might be related to the MutationObserver but that is just a guess.
Edit: Scratch that, now the calculator is back to failing again. I went to commit the code but now it doesn’t work. I don’t know what I did differently. 😕