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
closed 04:42PM - 28 Aug 23 UTC
scope: curriculum
If you want to make sure your project is not failing because of React 18 start b… y using the old render method.
```js
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](https://react.dev/reference/react-dom/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](https://forum.freecodecamp.org/) 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)
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1454)
* 25 + 5 Clock ✅ (may still fail using React 18 and hooks)
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1485)
* Drum Machine ✅
* [PR](https://github.com/freeCodeCamp/testable-projects-fcc/pull/1452)
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:
project for - https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-25--5-clock
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.
nairda
July 20, 2022, 8:50pm
3
Thank you so much @camperextraordinaire 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!