nairda
July 20, 2022, 4:49am
#1
**Project 25+5 Clock “done” but its built in React 18.2.0 **
The test script wont work,
after a little googling, I found:
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 th…
opened 05:23PM - 11 May 22 UTC
type: bug
help wanted
scope: curriculum
status: work in progress
I have edited this issue.
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
* Random Quote Machine
* The fCC example is using jQuery, I tested it with React 18 and it worked just fine.
* Markdown Previewer
* Works
* JavaScript Calculator ✅ (the example project is passing but we may have to use a longer delay as I have seen at least one project fail with the new test code. I have not yet tested that code with a longer delay)
* 9/16 passed
* Example - https://codepen.io/lasjorg/pen/JjpRybg
* 25 + 5 Clock
* 13/29 passed (The test is no longer able to manipulate the timer so it is slow to test)
* Example - https://codepen.io/lasjorg/pen/WNMGEOM
* Drum Machine (fixed) ✅
* 7/8 passed
* Example - https://codepen.io/lasjorg/pen/jOZrXGv
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
I won’t know if the project is done or not
How should I proceed?
my code:
live site:
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock
Link to the challenge:
I was able to follow this article to get your app running using React 17 and your app passes 26 out of the 29 tests.
The main points are:
Delete node_modules
.
Delete package-lock.json
Make the following changes to your package.json
file:"@testing-library/react": "^13.3.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
Make the following changes in your ./src/index.js
file:
Changeimport ReactDOM from 'react-dom/client';
toimport ReactDOM from 'react-dom';
Changeconst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
// <React.StrictMode>
// </React.StrictMode>
);
toconst root = document.getElementById('root');
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
root
);
Run npm install
Run npm start
NOTE: Of the 3 tests you are failing, you can easily fix the one where the sound plays when the timer hits 00:00
. The other two tests are technically testing for an invalid app. The tests actually expect the timer to go from 00:00
back to the applicable session or break length time. Of course doing this ends up adding one second more to each session and break. Over an hour, this would add 1 extra minute of session and 1 extra minute of break. You will have to hack your valid timer (in my opinion) just to pass the tests.
1 Like
nairda
July 20, 2022, 8:50pm
#3
Thank you so much @RandellDawson for your time and help!
Downgraded react to 17.0.2 and the tests work again
It was a really good idea
( p.s. gotta do what you gotta do to pass the tests )
Have great day!